Redux是JavaScript的状态容器,它提供了可预测化的状态管理。
一、Redux主要组成部分:
-
Store
Store是存储着数据的地方,Redux应用只有一个Store。
Redux提供createStore这个函数,用来生成Store。
import {createStore} from 'redux'
store(创建的时候需要传入一个reducer)
const store = createStore(reducer);
function reducer(state,action){}
-
Action
所有数据的变化,必须通过派发(dispatch)action来更新;
action是一个普通的JavaScript对象,用来描述这次更新的type和content;
const action1 = {
type: "ADD_FRIEND",
info: {
name: "boge",
age: 20
}
}
const action2 = {
type:"CHANGE_NAME",
playload: {
index: 0,
newName: "bogezhenshuai"
}
}
-
Reducer
Reducer是一个纯函数;
Reducer做的事情就是将传入的state和action结合起来生成一个新的state;
//定义initialState是为了给state一个默认值
const initialState = {counter: 0}
function reducer(state = initialState,action){
switch (action.type){
case "INCREMENT":
return {...state,counter:state.counter + 1}
default:
return state;
}
}
二、Redux三大原则:
1.单一数据源
- 整个应用程序的state被存储在一颗object tree中,并且这个object tree只存储在一个 store 中;
- Redux并没有强制让我们不能创建多个Store,但是那样做并不利于数据的维护;
- 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改;
2.State是只读的
- 唯一修改State的方法一定是触发action,不要试图在其他地方通过任何的方式来修改State;
- 这样就确保了View或网络请求都不能直接修改state,它们只能通过action来描述自己想要如何修改state;
- 这样可以保证所有的修改都被集中化处理,并且按照严格的顺序来执行,所以不需要担心race condition(竟态)的问题;
3.使用纯函数来执行修改
- 通过reducer将 旧state和 actions联系在一起,并且返回一个新的State;
- 随着应用程序的复杂度增加,我们可以将reducer拆分成多个小的reducers,分别操作不同state tree的一部分;
- 但是所有的reducer都应该是纯函数,不能产生任何的副作用;
三、Redux的使用过程
1、创建一个对象,作为我们要保存的状态
2、创建Store来存储这个state:
创建store时必须创建reducer;
我们可以通过store.getState来获取当前的state;
3、通过action来修改state:
通过dispatch来派发action;
通常actoin中都会有type属性,也可以携带其他的数据;
4、修改reducer中的处理代码
5、可以在派发action之前,监听store的变化;
import {createStore} from 'redux'
//定义initialState是为了给state一个默认值
const initialState = {counter: 0}
//action
const action = {type:"INCREMENT"};
function reducer(state = initialState,action){
switch (action.type){
case "INCREMENT":
return {...state,counter:state.counter + 1}
}
}
//store(创建的时候需要传入一个reducer)
const store = createStore(reducer);
//订阅store的修改
store.subscribe(() => {
console.log("counter:",store.getState().counter); //显示counter:1
});
//派发action
store.dispatch(action);
Redux流程.png
转自:https://www.jianshu.com/p/e94f81aa82c4