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在项目中使用就完成了