React整合原生redux（二）

React整合nativeredux（二）前言在reactnativeredux（一）中，已经完成了一个基本的应用框架，但是在分发action的时候，不能在action中写逻辑。也就是说，action永远只是一个json对象，不能是一个Functions，虽然你可以写逻辑方法改变view生命周期中state的值，但是长此以往，会造成项目臃肿，难度大维护，所以react-thunk中间件由此诞生项目创建参考react集成原生redux（1）增加依赖包yarn添加redux-thunk-ssrc文件目录|-app.js|-store.js|-index.js|-actions.js有一个actions.js文件，里面存放的是actionaction.js的内容和逻辑//actions.js/***redux-thunkaction格式是一个函数，返回值是一个使用dispatch的函数*基本格式*function(){*returnfunction(dispatch){*dispatch(...)*}*}*/exportconstfetchListAction=param=>{returndispatch=>{//模拟异步请求请求数据(fetch,axios等)newPromise(resolve=>{setTimeout(()=>{constdata={code:0,msg:"ok",data:{list:["hello","thunk"],param}};解决（数据）；},2000);}).then(result=>{dispatch({type:"SAVE",payload:result.data});});};};Store修改引入redux-thunk完整代码//store.jsimport{createStore,applyMiddleware}来自“redux”；从“redux-thunk”导入thunk；从“redux-devtools-extension”导入{composeWithDevTools}；//chromeredux调试工具//状态初始值constinitState={list:["a","b"]};//reducer格式constreducer=(state=initState,action)=>{const{type,payload}=动作；//动作类型处理if(type==="SAVE"){returnObject.assign({},state,payload);}returnstate;};/***实例化store*参数1：reducer*参数2：中间件*/exportdefaultcreateStore(reducer,composeWithDevTools(applyMiddleware(thunk)));app.js中的调用主要是这个useEffect(()=>{store.dispatch(fetchListAction({id:1}));},[]);完整代码//app.jsimportReact,{useState,useEffect}from"react";importstorefrom"./store";import{fetchListAction}from"./actions";exportdefault()=>{//获取store中的state，放到hook函数中，类似this.setState(store.getState())const[state,setState]=useState(store.getState());useEffect(()=>{//store订阅函数，当状态通过store.dispat当ch分发动作改变时自动执行此函数store.subscribe(()=>{setState(store.getState());//重置组件状态的值以更新视图});},[]);//[]表示只执行一次//模拟第一个页面加载请求数据useEffect(()=>{store.dispatch(fetchListAction({id:1}));},[]);const{列表}=状态；constaddList=()=>{list.push(Date.now());store.dispatch({type:"SAVE",payload:{list}});//分发一个动作对象};return(

);};这样就可以满足中小型项目的需求。查看完整代码。一般大型项目使用redux-saga。请看React集成原生redux（三）