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