上一篇写了react实现todoList,并没有用到redux。这篇博客会介绍redux的核心部分和使用redux进行状态管理的开发过程。
redux的学习可以参考redux中文文档 ,这里简单带大家复习一下redux的核心部分:
(1)定义action:
action用来描述用户的行为,是一个对象。action是store数据的唯一来源,通过store.dispatch(action)可以更改state。
例如:我们可以定义action对象。
const action={
type:"ADD"
}
(2)定义reducer
reducer为一个返回值为对象的函数,用来定义操作的过程,根据action.type来进行state的更新。
例如,
const reducer=(state=0,action)=>{
switch(action.type){
case "ADD":
return state+1;
case "DEC":
return state-1;
default:
return state;
}
}
(3)创建store
store是一个用来存储数据的容器,可以通过createStore()方法创建store,通过getState()可以获取state对象:
import {createStore} from "redux"
const store=createStore(reducer)
const state=store.getState()
(4)Provider组件
Provider组件用来承载组件,利用provider组件可以将store注入到容器中。
<Provider store={store}>
<Add></Add>
<Todo></Todo>
<Done></Done>
</Provider>
(5)connect()
组件App可以通过export default connect()(App)方式来抛出。
<