redux在react项目中的应用

今天想跟大家分享一下redux在react项目中的简单使用 1 
1.redux使用相关的安装
 2 yarn add redux
 3 yarn add react-redux(连接react和redux)
 6 
 7 2. redux在项目中的基础使用
 8 
 9 1.在index.js入口文件注入store
10 import { Provider } from "react-redux"
11 import store from "./redux/store"
12 ReactDOM.render(
13       <Provider store={ store }>
14           <App />
15       </Provider>,
16    document.getElementById("root")
17 )
18 
19 2.新建一个store文件夹，新建store.js和reducers.js文件
20 
21 3.在store.js文件中书写以下代码
22 import { createStore} from "redux"
23 import reducers from "./reducers"
24 const store = createStore(reducers);
25 export default store
26 
27 4.在reducer.js文件中书写以下代码
28 const defaultState = {
29    list:[]
30 }
31 export default (state=defaultState, action)=>{
32    if(action.type === 'add'){
33       return {
34          list:[...state.list,action.payload]
35       }
36    }
37    return state
38 }
39 
40 5.如何在子组件中使用store(直接引入store.js也可以，但不推荐)
41 import { connect } from "react-redux"
42 const mapState = (state)=>{
43    return {
44 //获取store中的值，将list注入组件的props中
45       list:state.list
46    }
47 }
48 const mapDispatch = (dispatch)=>{
49    return {
50 //返回一个add方法，将其注入组件的props中，组件可直接通过this.props.add()调用
51      add(){
52       dispatch({
53          type:'add',
54          payload:'ldc'
55       })
56      }
57   }
58 }
59 //connect执行完后返回的是一个高阶组件，再将Home注入强化
60 export default connect(mapState,mapDispatch)(Home)
61 
62 6.在组件中调用
63  <ul>
64       {
65          this.props.list.map((val,index)=>{
66              return <li key={index}>{val}</li>
67           })
68       }
69     </ul>
70     <button onClick={this.props.add}>ADD</button>
71 
72 7.这样简单的redux在项目中使用就完成了