Redux

我心飞翔 分类:javascript

Redux

Redux 是 JavaScript 状态容器,提供可预测化的状态管理

三大原则

1. 单一数据源

整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store中。

console.log(store.getState())
 

2. State 是只读的

唯一改变 state 的方法就是触发 actionaction 是一个用于描述已发生事件的普通对象。

确保了视图和网络请求都不能直接修改 state,相反它们只能表达想要修改的意图。因为所有的修改都被集中化处理,且严格按照一个接一个的顺序执行,因此不用担心 race condition 的出现。 Action 就是普通对象而已,因此它们可以被日志打印、序列化、储存、后期调试或测试时回放出来。

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})
 

3. 使用纯函数来执行修改

为了描述 action 如何改变 state tree ,你需要编写 reducers

Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state。刚开始你可以只有一个 reducer,随着应用变大,你可以把它拆成多个小的 reducers,分别独立地操作 state tree 的不同部分,因为 reducer 只是函数,你可以控制它们被调用的顺序,传入附加数据,甚至编写可复用的 reducer 来处理一些通用任务

所需依赖包

// src/store/index.js
npm i redux --save-dev
npm i react-redux --save-dev
npm i redux-thunk --save-dev // 一个异步的中间件实现库

npm i redux-persist --save-dev // Redux的持久化的实现(根据实际情况决定是否安装)
 

Example

// src/store/state/type.js
export const INCREASE = 'INCREASE';
export const DECREASE = 'DECREASE';
export const RESET = 'RESET';
 
// src/store/state/action.js
import { INCREASE, DECREASE, RESET } from './type';

const increase = () => ({ type: INCREASE });
const decrease = () => ({ type: DECREASE });
const reset = () => ({ type: RESET });

export {
    increase,
    decrease,
    reset
}
 
// src/store/state/reducer.js
import { combineReducers } from 'redux';
import { INCREASE, DECREASE, RESET} from './type';

// 原始默认state
const defaultState = {
  count: 5
}

function counter(state = defaultState, action) {
  switch (action.type) {
    case INCREASE:
      return { ...state, count: state.count + 2 };
    case DECREASE:
      return { ...state, count: state.count - 2 };
    case RESET:
      return { ...state, count: 0 };
    default:
      return state;
  }
}

export default combineReducers({
    counter
});
 
// src/store/index.js
import { createStore } from 'redux';
import rootReducer from './state/reducer';

const configureStore = preloadedState => {
    return createStore (
        rootReducer,
        preloadedState
    );
}

const store = configureStore();

export default store;
 
// App.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from './src/store';
import Login from './src/view';

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Login/>
      </Provider>
    );
  }
}
 

回复

我来回复
  • 暂无回复内容