react篇---redux的使用

一、基础介绍

• 本文在React 零基础入坑的基础上介绍redux的使用。
• 如若对react不是很了解，能够先行掌握react的基础知识。
• react官方文档

二、使用redux

• 安装依赖

cnpm i -S redux react-redux redux-thunk  // redux-thunk => action异步处理
复制代码

• 基础模块介绍，如图所示，在src下新建store文件夹，新建state,actions,reducers,actionTypes,index

  

state  ==> 初始化state数据
actions ==> redux规定修改state数据必须经过dispatch对应的action
reducers ==> 描述应用如何更新state(能够理解为action触发了state的修改方法，reducers是修改方法的具体内容)
actionTypes ==> action的类型，这里新建actionTypes文件，只是方便统一管理
index ===> 导出建立的store
复制代码

• state.js,初始化state数据

export default {
  userReducer: {
    login: false,
    test: 'test'
  },
  orderReducer: {
    orderType: 'order',
    completed: 'false',
    num: 0
  }
}
复制代码

• actions.js，修改state的方法

import { USER_LOGIN, ADD_ORDER_NUM } from './actionTypes'
export function userLogin(payload) {
  return {
    type: USER_LOGIN,
    payload
  }
}
export function addOrderNum() {
  return {
    type: ADD_ORDER_NUM
  }
}
复制代码

• actionTypes.js，对action的类型集中管理

export const USER_LOGIN = 'USER_LOGIN'
export const ADD_ORDER_NUM = 'ADD_ORDER_NUM'
复制代码

• reducers.js，更新state具体描述

import { combineReducers } from 'redux'
import { USER_LOGIN, ADD_ORDER_NUM } from './actionTypes'

let userReducer = (state = false, action) => {
  switch (action.type) {
    case USER_LOGIN:
      return {
        ...state,
        login: action.payload
      }
    default:
      return state
  }
}

let orderReducer = (state = {}, action) => {
  switch (action.type) {
    case ADD_ORDER_NUM:
      return {
        ...state,
        num: ++state.num
      }
    default:
      return state
  }
}

export default combineReducers({ // combineReducers,合并多个reducers
  userReducer,
  orderReducer,
})
复制代码

• index.js，暴露store

import { createStore, applyMiddleware } from 'redux'
import reducers from './reducers'
import initialState  from './state'
import thunk from "redux-thunk"  // thunk中间件，加强异步action
const enhancer = applyMiddleware(thunk)  // redux须要经过applyMiddleware来使用中间件
export default createStore( // createStore,建立store实例
  reducers,
  initialState,
  enhancer
)
复制代码

三、在组件中使用

• 修改index.js入口文件，如图所示，红线部分是须要修改的部分。Provider,是一个高价组件，经过它把store共享给子组件。其主要原理就是利用react的context来向子组件共享数据。

  

• 在具体的组件中使用

import React, { Component } from 'react';
import PropsTypes from 'prop-types'  // PropsTypes定义数据的类型，cnpm i -S prop-types
import { connect } from 'react-redux' // connect顾名思义，链接组件，返回一个高阶组件
import { addOrderNum } from '@/store/actions' // 引入须要使用的action

class OrderNum extends Component {
  static PropsTypes = { // 定义props的类型，isRequired表示参数是必须的
    orderType: PropsTypes.string,
    num: PropsTypes.number.isRequired,
    completed: PropsTypes.bool,
    addOrderNum: PropsTypes.func.isRequired
  }
  render() {
    return (
      <div className="order_component">
        <p>orderType: {this.props.orderType}</p>
        <p>orderNum: {this.props.num}</p>
        <p>completed: {this.props.completed}</p>
        <button onClick={this.props.addOrderNum}>add order number</button> 
      </div>
    );
  }
}
const mapStateToProps = (state, ownProps) => ({ // mapStateToProps,将组件的props和state中的数据关联起来
  orderType: state.orderReducer.orderType,
  completed: state.orderReducer.completed,
  num: state.orderReducer.num
})
const mapDispatchToProps = { // mapDispatchToProps， 将组件的事件和action关联起来
  addOrderNum
}
export default connect(mapStateToProps, mapDispatchToProps)(OrderNum)  // connect接受mapStateToProps， mapDispatchToProps
复制代码

四、总结

• 本文主要介绍了react-redux的使用
• 布局彻底根据本身的喜爱，你也能够不这么作
• 如有不妥之处，欢迎指正。