redux 是一个帮助我们管理State的容器:redux是JavaScript的状态容器,提供了可预测的状态管理
redux 不是只能用于 react 中的,它还可以用在 vue 等其它框架中
redux 的主要作用就是:集中式管理(读/写)react 应用中多个组件共享状态
1、js 开发的应用程序变得原来越复杂,需要管理的状态数据变得越来越多。比如要管理的状态的有:服务器返回的数据、缓存的数据、用户操作产生的数据等
2、管理状态变得越来越复杂
3、react 是在视图层帮助我们解决了DOM的渲染过程,但是State依然是留给我们自己来管理。当组件之间的状态依赖不是很多时,状态变化也不是很复杂时,我么就可以通过 react 本身来进行状态管理,但是当着写都变得复杂时,就需要使用到 redux 来进行状态的管理了。
store 就是保存数据的地方,它相当是一个容器。整个应用只能有一个 store。store 就是将 state、action 与 reducer 联系在一起的一个对象
得到该对象
import redux from "redux";
import reducer from './reducer'
const store = redux.createStore(reducer);
功能
所有的数据都需要通过派发(dispatch)action 来更新,action 也是一个普通的 js 对象,这个对象包含两部分:更新的 type 和 data(可写可不写)
const incrementAction = (data) => ({
type: 'INCREMENT',
data
});
将 state 和 action 联系在一起,也就是根据旧的 state 和 action, 产生新的state 的纯函数
const defaultState = {
counter: 0
}
function reducer(state = defaultState, action) {
switch (action.type) {
case ADD_NUMBER:
return { ...state, counter: state.counter + action.num };
case SUB_NUMBER:
return { ...state, counter: state.counter - action.num };
case INCREMENT:
return { ...state, counter: state.counter + 1 };
case DECREMENT:
return { ...state, counter: state.counter - 1 };
default:
return state;
}
}
1、安装
yarn add redux
npm instasll redux
2、目录划分
3、具体内容
index.js
import store from './store/index.js';
import {
addAction,
subAction,
incAction,
decAction
} from './store/actionCreators.js';
// 订阅
store.subscribe(() => {
console.log(store.getState());
})
store.dispatch(addAction(10));
store.dispatch(addAction(15));
store.dispatch(subAction(8));
store.dispatch(subAction(5));
store.dispatch(incAction());
store.dispatch(decAction());
store文件夹
index.js
import redux from 'redux';
import reducer from './reducer.js';
const store = redux.createStore(reducer);
export default store;
reducer.js
import {
ADD_NUMBER,
SUB_NUMBER,
INCREMENT,
DECREMENT
} from './constants.js';
const defaultState = {
counter: 0
}
function reducer(state = defaultState, action) {
switch (action.type) {
case ADD_NUMBER:
return { ...state, counter: state.counter + action.num };
case SUB_NUMBER:
return { ...state, counter: state.counter - action.num };
case INCREMENT:
return { ...state, counter: state.counter + 1 };
case DECREMENT:
return { ...state, counter: state.counter - 1 };
default:
return state;
}
}
export default reducer;
actionCreators.js
import {
ADD_NUMBER,
SUB_NUMBER,
INCREMENT,
DECREMENT
} from './constants.js';
export const addAction = num => ({
type: ADD_NUMBER,
num
});
export const subAction = num => ({
type: SUB_NUMBER,
num
});
export const incAction = () => ({
type: INCREMENT
});
export const decAction = () => ({
type: DECREMENT
});
constants.js
export const ADD_NUMBER = "ADD_NUMBER";
export const SUB_NUMBER = "SUB_NUMBER";
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
总结:redux的流程
用户通过界面组件 触发ActionCreator,携带Store中的旧State与Action 流向Reducer,Reducer返回新的state,并更新界面
传送门