手把手教学taroredux，10分钟学会redux的模块化处理和使用

npm install --save redux react-redux redux-thunk

二、创建store文件夹

store.js: 创建全局唯一的store。
actions&＃xff1a;用于描述发生什么事件。
reducers&＃xff1a;用于action如何改变state树。

1.创建唯一的store.js

作用&＃xff1a;建立redux和组件间的桥梁

&＃64;file(src/store/store.js)import { createStore, applyMiddleware, compose } from &＃39;redux&＃39;;
import thunk from &＃39;redux-thunk&＃39;;
import reducer from &＃39;./reducers&＃39;;// window.__REDUX_DEVTOOLS_EXTENSION__ 可使用Redux DevTools插件
const composeEnhancers &＃61; window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;// 使用Redux-thunk中间件
const enhancer &＃61; composeEnhancers(applyMiddleware(thunk));// 创建store
const store &＃61; createStore(reducer, enhancer);export default store;


2.处理actions中的address.js

// 修改收货地址
export const editAddress &＃61; (data) &＃61;> {return { type: &＃39;EditAddress&＃39;, data }
}


3.处理actions中的index.js

作用&＃xff1a;统一导出action

import {editAddress} from &＃39;./address&＃39;;export {editAddress,
}


4.处理reducers中的address.js

&＃64;file(src/store/reducers/address.js)const addressInfo &＃61; {proid: &＃39;1&＃39;,pro: &＃39;河南&＃39;,cityid: &＃39;1&＃39;,city: &＃39;洛阳&＃39;,areaid: &＃39;&＃39;,area: &＃39;&＃39;,
}
const address &＃61; (state &＃61; addressInfo, action) &＃61;> {switch (action.type) {case &＃39;EditAddress&＃39;:return { ...state, ...action.data }default:return state}
}export default address;


5.处理reducers中的index.js

作用&＃xff1a;统一导出多个reducer

import { combineReducers } from &＃39;redux&＃39;;
import address from &＃39;./address&＃39;;export default combineReducers({ address,
});


6.在app.js中引入store – 模块集成完毕

此处只写最核心的部分

import { Component } from &＃39;react&＃39;;
// 1.导入Provider
import { Provider } from &＃39;react-redux&＃39;
// 2.导入store
import store from &＃39;./store/store&＃39;
class App extends Component {render() {return (// 3.使用Provider{this.props.children})}
}export default App


7.组件中使用-4步走

// 演示单个redux
import { Component } from &＃39;react&＃39;
import { View, Button } from &＃39;&＃64;tarojs/components&＃39;
import Taro from &＃39;&＃64;tarojs/taro&＃39;;// 1.引入connect
import { connect } from &＃39;react-redux&＃39;;
// 2.引入action里的fn
import { editAddress } from &＃39;../../store/actions/index&＃39;;import "taro-ui/dist/style/components/button.scss" // 按需引入
import &＃39;./address.less&＃39;;// 3.第三步
&＃64;connect(({ address }) &＃61;> ({ address }), (dispatch) &＃61;> ({editAddress(data) {dispatch(editAddress(data))},})
)export default class Address extends Component {constructor() {super(...arguments)this.state &＃61; {list: [{ pro: &＃39;河南&＃39;, proid: 1, city: &＃39;洛阳&＃39;, cityid: 1, area: &＃39;新安&＃39;, areaid: 1 },{ pro: &＃39;河南2&＃39;, proid: 1, city: &＃39;洛阳2&＃39;, cityid: 1, area: &＃39;新安2&＃39;, areaid: 1 },{ pro: &＃39;河南3&＃39;, proid: 1, city: &＃39;洛阳3&＃39;, cityid: 1, area: &＃39;新安3&＃39;, areaid: 1 },],}}goto &＃61; (item) &＃61;> {// 4.使用action中的fnthis.props.editAddress(item)}render() {return ({/* 展示redux的数据 */}当前地址&＃xff1a;{this.props.address.pro &＃43; &＃39; &＃39; &＃43; this.props.address.city &＃43; &＃39; &＃39; &＃43; this.props.address.area}修改地址{this.state.list.map(item &＃61;> {return ({item.pro} {item.city} {item.area})})})}
}


注&＃xff1a; connect 方法接受两个参数 mapStateToProps 与 mapDispatchToProps
mapStateToProps&＃xff0c;函数类型&＃xff0c;接受最新的 state 作为参数&＃xff0c;用于将 state 映射到组件的 props
mapDispatchToProps&＃xff0c;函数类型&＃xff0c;接收 dispatch() 方法并返回期望注入到展示组件的 props 中的回调方法

至此处理完毕&＃xff0c;可以在持续集成其他模块的状态管理