下面几篇是我最近的学习心得，自学react，redux，逐渐找到自己的方向，现在是自己的方向写出来方便大家学习参考。肯定会有不足之处。欢迎评论和更正。日常项目中直接使用react是没有问题的，但是随着项目越来越大，组件逐渐增多，组件之间的嵌套使得数据管理的负担越来越重。在纯react项目中，每个组件维护自己的state，父子组件之间的通信，兄弟组件之间的通信也可以实现，但是随时项目代码量增加时维护起来会变得困难，所以使用redux对于数据管理是很有必要的，也是一个很好的自我技术提升的方向。本文重点介绍功能实现和使用过程，可能细节不够详尽，但个人感觉对于初学者来说应该足够了，可以实现自己想要的功能。第一原则（纯白话）：页面操作（点击什么的）触发action-->action经过一层处理后触发reducer-->reducer定义了store中唯一的全局state+store方法（必须是纯Function，即也就是说，你传入什么参数就会输出相应的结果，不能根据实时时间戳等类似的方法产生不同的值。）-->最后把数据存入store中的state，页面也会根据状态变化自动更新。Basic：Provider：具体概念我就不多说了。如果你想详细研究它，你可以自己做。这里我们只讲解如何将其放在根组件的最外层，并将store传入其中。代码（登录函数流程）：//使用react-redux中的connect方法import{connect}from'react-redux';//导入我们的actiondefinedimport{saveUserinfo}from'@/Reducers/Pages/actions';//使用连接来包装我们的状态和动作。这里有两个方法（mapStateToProps,mapDispatchToProps），具体概念自成体系。//在组件结束时导出默认连接export(mapStateToProps,mapDispatchToProps)(Login);//可以写成exportdefaultconnect(state=>({//如果你的组件需要使用store中的state，在这里引入你要使用的reducer函数的名称}),{//这里是一个引用你当前组件需要使用的所有action方法saveUserinfo})(Login);//按钮提供点击事件Login//sumitForm方法sumitForm=()=>{var用户名=this.refs.username.value;varpassword=this.refs.password.value;//发送ajax请求，这里我封装了一层，很简单，直接写ajax请求即可，重点在请求成功的回调中LoginFunc(username,password).then(res=>{//data请求成功后vardata=res.data;//这里是触发action的地方，传入我们需要的数据作为参数即可。this.props.saveUserinfo(数据);this.props.history.push("/index");上面的})}就是在组件中触发action的过程。此时，可以将接口返回的数据传递给action。//定义action时，需要先定义action-type。作用是将action与reducer关联起来。如果action要触发reducer，那么只需要使用定义好的类型，不需要引用reducer，这样别人看我们代码的时候，看一眼就知道这个block有什么功能类型，具体注释也可以写在类型中//类型很简单//保存用户信息exportconstSAVEUSERINFO="SAVEUSERINFO";actioncode//importtypeimport*asPagesfrom'./action-types';//保存用户表单数据exportconstsaveUserinfo=(data)=>{//传入的数据就是我们刚刚传入的后端返回数据在组件中//这里我们直接返回types，并在return{type:Pages.SAVEUSERINFO,data}}这里是action，我们可以在action的组件中写后端请求，只需要触发返回和传递数据时的类型。再来看reducer//之前说过action只需要触发type就可以触发reducer//所以reducer还需要引入reducerimport*asPagesfrom'./action-types';//在reducer中,我们需要定义state,也就是store中唯一的stateletreducer，action传递过来的数据保存到store中的state//两个参数，第一个是state，第二个是action传递过来的数据，包括type和data，判断要执行的函数类型值。这里，只有一个typeexportdefaultfunctionUserInfo(state=defaultValue,action={}){switch(action.type){//Thisistype是类型casePages.SAVEUSERINFO:returnassociatedwithactionandreducer{...state,//这里是将action传过来的数据保存到我们的store中...{session_id:action.data.data.session_id,user_name:action.data.data.name,user_id:action.data.data.id,is_login:true,初始化:action.data.data.initialization,org_name:action.data.data.org_name}};默认值：返回状态；}}以上就完成了，我们从后台获取数据，所有进程保存在store中//保存在store中之后，我们页面的所有组件都可以在这里获取数据，//同理，数据所在的地方我们组件中使用的会根据store中数据的变化而变化，也就是说，如果我们要改变页面的状态，唯一的办法就是触发action来完成上面的步骤。到这里我们还没完，还需要形成一个闭环，就是我们的Provider里面怎么存储store//我这里把store拆分了，按照功能拆分。大家可以根据每个人的习惯来拆分。我的目录结构，大家可以根据具体的项目区域自定义自己的目录结构//有拆分就一定有合并，所以我们需要先合并reducer，然后再存储到Provider中//这里我们使用redux提供的方法combineReducersimport{combineReducers,}from'redux';从'./Pages/reducers'导入UserInfo；constrootReducer=combineReducers({UserInfo,//reducerforsomeotherfunctions//UserStaffDirectory,//addUserMsgReducer});//导出一个统一的reducerexportdefaultrootReducer;插一句，上面基本的功能已经完成了，我来了多加一个功能，就是数据持久化，就是我们的数据存储在store中但是会出现刷新数据丢失的问题，非常不利于我们的项目使用，所以我新加了一个库来保证我们的数据持久化，这里使用redux-persist库数据持久化//先导入redux的一些方法import{createStore,applyMiddleware}from'redux';//也用到了thunk，还没来研究，先用它在这里importthunkfrom'redux-thunk';//引入redux-persistimport{persistStore,persistReducer}from'redux-persist';import{PersistGate}from'redux-persist/es/integration/react';importstoragefrom'redux-persist/es/storage'//首先定义一个对象（根据官方文档，没有具体研究）constpersistConfig={key:'root',storeage,};//将我们合并的reducer引入importReducersfrom'@/Reducers';//使用redux-persist合并constpersistedReducer=persistReducer(persistConfig,Reducers)//定义一个函数，返回persistor和store，让我的componentsusefunctionconfigureStore(){//我这里用的是thunk，具体原理没去详细研究。我使用了redux的createStore进行merge，最终产生了我们需要传给Provider的store。letstore=createStore(persistedReducer,applyMiddleware(thunk));//这里是应用redux-persist完成数据持久化letpersistor=persistStore(store);return{persistor,store}}//const在组件中呈现render=Component=>{//importconst{persistor,store}=configureStore();ReactDOM.render(//将store传递给根组件//数据持久化//所有子组件,document.getElementById('app'),)}以上完成整个循环，组件发起动作，触发reducer，保存数据到store，更新组件只有保存这一步，不需要取。对，上面实现了登录功能，后台返回的数据保存在store中。现在我们将store中的数据取出来展示在界面上。登录请求成功后，后台会返回用户名、用户ID等信息，这些信息是我们保存在store中的。接下来，我们的标头组件将引用我们商店中的用户名。我们不需要引入太多的文件，只需要在组件末尾的方法mapStateToProps中添加我们想要的reducer函数名即可。constmapStateToProps=state=>({UserInfo:state.UserInfo})exportdefaultconnect(mapStateToProps,({}))(Header);//在组件中使用this.props.UserInfo.user_name//获取值//同时，如果我们改变store中的user_name，我们获取值的地方也会动态更新。以上就是本文的全部内容。如果您发现任何不足或错误，请指正。转载请注明出处，顺丰大洋为首发。
