redux基础入门学习总结

redux基础学习总结

​ redux是对状态统一进行管理，如果你的项目非常小，不需要使用redux。在开发过程中，如果你感觉你的状态不好管理，此时你就要想到，需要使用redux统一管理状态了。

三大原则

Redux 遵守下面三大原则：

• 单一数据源

  在 Redux 中，所有的状态都放到一个 store 里面，一个应用中一般只有一个 store。在Redux这个对象上，有一个api，叫createStore，Redux.createStore就可以创建一个仓库。需要给仓库分配一个叫reducer的管理员，仓库的核心是store，在store中放state。单一数据源，状态只能来自于store。

• State 是只读的

  在 Redux 中，唯一改变 state 的方法是通过 dispatch 触发 action，action是一个JS对象，描述一个操作状态的动作，里面必定有一个属性叫type，action 描述了这次修改行为的相关信息，并且保证状态不会被随意修改。

• 通过纯函数来修改

  为了描述 action 使状态如何修改，需要你编写 reducer 函数来修改状态。reducer 函数接收前一次的 state 和 action，返回新的 state。无论被调用多少次，只要传入相同的 `state 和 action，那么就一定返回同样的结果。通常将reducer传入createStore方法，每当store派发一个action就会自动调用reducer，得到新的state。

Store

Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。

Redux 提供createStore这个函数，用来生成 Store。

import { createStore } from 'redux';
const store = createStore(fn);

上面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。

state

Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。

当前时刻的 State，可以通过store.getState()拿到。

import { createStore } from 'redux';
const store = createStore(fn);

const state = store.getState();

Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。

action

State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串Learn Redux。

可以这样理解，Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。

action 是把数据传到 store 的载体，一般我们通过 dispatch 将 action 传给 reducer，reducer 来计算出新的值。

​ 那么在发送一个 action 后，reducer 怎么知道当前发送的是哪个 action 呢？

​ 所以这里的 action.type 就是作为一个唯一标志来和 reducer 匹配起来的。在 reducer 里面会拿到 action.type 和 传入的数据来进行处理。

const reducer = (state, action) => {
  switch(action.type):
	case "ADD_TODO":
  	state.todos = [...state.todos, action.payload];
		return { ...state };
	default:
		return state;
}

reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

function reducer(state=initState,action){
        switch (action.type) {
            case "INCREMENT":
                return { number:state.number+1}
            case "DECREMENT":
                return { number:state.number-1}
            default:
                return state; // 如果action不能识别，还是返回老的状态
        }
    }

分析store.dispatch(increment)执行流程：
当执行store.dispatch(increment)，它会调用reducer，我们会给reducer传递两上参数， 一个是state，它是老的状态，一个是action，action中必定有一个叫type属性，type属性值是 “INCREMENT”，它就执行到：return { number:state.number+1} state是之前的老的状态，就会在老的状态的基础上加1，return {number:1}

第二次store.dispatch(increment)时，同样会调用reducer，会给reducer传递两个参数，一个是state，此时state是上一次修改完状态后的 state，不是initState。

**注意: ** 在reducer中不能出现如下代码：
1）和时间有关的api data对象
2）不能操作dom
3）不能调用系统api
4）不能发送http请求
5）不能使用Math.random等不纯方法

基本工作流程

首先，用户发出 Action。

store.dispatch(action);

然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回 新的 State。

let nextState = todoApp(previousState, action);

State 一旦有变化，Store 就会调用监听函数。

// 设置监听函数
store.subscribe(listener);

listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。

function listerner() {
  let newState = store.getState();
  component.setState(newState);   
}