redux的简单使用

redux 简介

redux 是一个帮助我们管理State的容器：redux是JavaScript的状态容器，提供了可预测的状态管理

redux 不是只能用于 react 中的，它还可以用在 vue 等其它框架中

redux 的主要作用就是：集中式管理（读/写）react 应用中多个组件共享状态

为什么需要 redux

1、js 开发的应用程序变得原来越复杂，需要管理的状态数据变得越来越多。比如要管理的状态的有：服务器返回的数据、缓存的数据、用户操作产生的数据等

2、管理状态变得越来越复杂

• 状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化；
• 当应用程序复杂时，state在什么时候，因为什么原因而发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪

3、react 是在视图层帮助我们解决了DOM的渲染过程，但是State依然是留给我们自己来管理。当组件之间的状态依赖不是很多时，状态变化也不是很复杂时，我么就可以通过 react 本身来进行状态管理，但是当着写都变得复杂时，就需要使用到 redux 来进行状态的管理了。

redux 核心理念

store

store 就是保存数据的地方，它相当是一个容器。整个应用只能有一个 store。store 就是将 state、action 与 reducer 联系在一起的一个对象

得到该对象

import redux from "redux";
import reducer from './reducer'

const store = redux.createStore(reducer);

功能

• 得到 state：getState()
• 派发 action，触发 reducer 调用，产生新的 state：dispatch(action)
• 注册监听，当产生新的 state 时，自动调用：subscribe(listener)

action

所有的数据都需要通过派发（dispatch）action 来更新，action 也是一个普通的 js 对象，这个对象包含两部分：更新的 type 和 data（可写可不写）

const incrementAction = (data) => ({
  type: 'INCREMENT',
  data
});

reducer

将 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;
  }
}

redux 三大原则

单一数据源

• 整个应用程序的state被存储在一颗object tree中，并且这个object tree只存储在一个 store 中
• 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改

State 是只读的

• 唯一修改State的方法一定是触发action（一个用于描述已发生事件的普通对象），不要试图在其他地方通过任何的方式来修改State
• 这样就确保了View或网络请求都不能直接修改state，它们只能通过action来描述自己想要如何修改state
• 这样可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心race condition（竟态）的问题

使用纯函数来执行修改

• 通过reducer将 旧state和 actions联系在一起，并且返回一个新的State
• 随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分
• 但是所有的reducer都应该是纯函数，不能产生任何的副作用

redux 的基本使用

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，并更新界面

传送门