本文共 3561 字，大约阅读时间需要 11 分钟。

统一状态管理

npm i react-redux --savenpm i react --save

文件的设置

配置actions文件夹，

export const CHANGE_COUNT = 'CHANGE_COUNT';export const CHANGE_MSGLIST = 'CHANGE_MSGLIST';

创建具体的actions文件，比如chat模块需要用的，创建chat.js

import {    CHANGE_COUNT, CHANGE_MSGLIST } from './actionTypes';export const changeCount = (value) => {     return {       type: CHANGE_COUNT,    payload: value,  };};export const changeMsgList = (value) => {     return {       type: CHANGE_MSGLIST,    payload: value,  };};

配置reducers文件夹

import {    CHANGE_COUNT, CHANGE_MSGLIST } from '../actions/actionTypes';//创建初始化数据，不调用任何dispatch的情况下，返回的数据const INITIAL_STATE = {     /* The Color of O2Team Brand */  count: 0,  msgList: [],};export default function theme(state = INITIAL_STATE, action) {     switch (action.type) {       case CHANGE_COUNT:      return {           ...state,        count: action.payload,      };    case CHANGE_MSGLIST:      return {           ...state,        msgList: action.payload,      };    default:      return state;    //如果不满足以上所有条件，也就是type的内容都不合法，则返回初始化数据，默认值  }}

创建所有模块的reducer集合

reducers.js文件import {    combineReducers } from 'redux'import theme from './theme'import chat from './chat'export default combineReducers({     theme,  chat})

配置store.js

import {    createStore, applyMiddleware, compose } from 'redux';import thunkMiddleware from 'redux-thunk';//为了异步actions的中间件import rootReducer from '../reducers';//所有的reducer导入//看起来复杂，其实是为了createStore的第二个参数，流程而已const composeEnhancers =  typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__    : compose;// window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({   //   // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...// }) : compose//看起来复杂，其实是为了createStore的第二个参数，流程而已const middlewares = [thunkMiddleware];//看起来复杂，其实是为了createStore的第二个参数，流程而已if (process.env.NODE_ENV === 'development' && process.env.TARO_ENV !== 'quickapp') {     middlewares.push(require('redux-logger').createLogger());}//看起来复杂，其实是为了createStore的第二个参数，流程而已const enhancer = composeEnhancers(  applyMiddleware(...middlewares),  // other store enhancers if any);export default createStore(rootReducer,enhancer)

到这里为止，redux的基本配置就结束了。

如何使用redux？

首先在index.js全局中导入store

import {    Provider } from 'react-redux';import store from "./store";

render( 
   
    //在provider组件包裹下，写代码
   )

组件中使用步骤

import {   connect} from 'react-redux';import {    CHANGE_COUNT, CHANGE_MSGLIST } from '../../acitons/actionTypes';export class ReduxTest extends Component {     render () {       console.log(this.props)    return (      
   
        
    
     {   this.props.chat}
    
      
   
    )  }}//在这里将store的初始数据，注入到this.propsconst mapStateToProps = (state) => {     return {       chat: state.chat  }}//在这里将actions的方法注入到this.propsconst mapDispatchToProps = (dispatch) => {     console.log(dispatch)    return {     	//通过this.props.CHANGE_COUNT 使用    CHANGE_COUNT: () => {         dispatch({           ...CHANGE_COUNT,        //这是传回去的参数，可以在reducers文件下对应的模块里，对应的type下，        //通过action.playload.name获取到，并改变初始化数据，渲染到页面上        playload: {          		name: "xixi"         }      })    },        CHANGE_MSGLIST: () => {         dispatch({           ...CHANGE_MSGLIST,        //这是传回去的参数        playload: {           	age: 18         }      })    }  };}//第一个参数是获取所有初始数据的方法，第二个参数是获取所有改变数据的方法，最后的ReduxTest是使用redux子组件的组件名称export default connect(mapStateToProps, mapDispatchToProps)(ReduxTest)