redux在react项目中的应用

今天想跟大家分享一下redux在react项目中的简单使用 1 
1.redux使用相关的安装
 yarn add redux
 yarn add react-redux(连接react和redux)

 2. redux在项目中的基础使用

 1.在index.js入口文件注入store
 import { Provider } from "react-redux"
 import store from "./redux/store"
 ReactDOM.render(
       <Provider store={ store }>
           <App />
       </Provider>,
    document.getElementById("root")
 )

 2.新建一个store文件夹，新建store.js和reducers.js文件

 3.在store.js文件中书写以下代码
 import { createStore} from "redux"
 import reducers from "./reducers"
 const store = createStore(reducers);
 export default store

 4.在reducer.js文件中书写以下代码
 const defaultState = {
    list:[]
 }
 export default (state=defaultState, action)=>{
    if(action.type === 'add'){
       return {
          list:[...state.list,action.payload]
       }
    }
    return state
 }

 5.如何在子组件中使用store(直接引入store.js也可以，但不推荐)
 import { connect } from "react-redux"
 const mapState = (state)=>{
    return {
 //获取store中的值，将list注入组件的props中
       list:state.list
    }
 }
 const mapDispatch = (dispatch)=>{
    return {
 //返回一个add方法，将其注入组件的props中，组件可直接通过this.props.add()调用
      add(){
       dispatch({
          type:'add',
          payload:'ldc'
       })
      }
   }
 }
 //connect执行完后返回的是一个高阶组件，再将Home注入强化
 export default connect(mapState,mapDispatch)(Home)

 6.在组件中调用
  <ul>
       {
          this.props.list.map((val,index)=>{
              return <li key={index}>{val}</li>
           })
       }
     </ul>
     <button onClick={this.props.add}>ADD</button>

 7.这样简单的redux在项目中使用就完成了