Redux学习笔记

Redux的设计思想：
1、web应用是一个状态机，视图与状态是一一对应的
2、所有的状态，保存在一个对象里面

Store的概念

store是保存数据的地方，相当于一个容器。整个应用中只有一个store
Redux提供createStore函数，用来生成store

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

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

State的的概念

store对象包含所有数据。如果想得到某个时点的数据，就要对store生成快照。这种时点的数据集合，就叫做state.
当前时刻的State，可以通过store.getState( )拿到。

import { creatStore } 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_T0D0,它携带的信息是字符串Learn Redux。

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

Action Creator的概念

View要发送多少中消息，就会有多少种Action。如果要手写，会很麻烦。可以定义一个函数来生成Action，这个函数叫做Action Creator

const ADD_TODO = '添加 TODO';

function addTodo(text){
    return {
        type:ADD_TODO,
        text
}
}
const action = addTodo('Learn Redux');

在上面的代码中，addTodo函数就是一个Action Creator

store dispatch的概念

store.dispatch()是View发出的Action的唯一方法

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

store.dispatch({
    type:'ADD_TODO',
    payload:'Learn Redux'
});

上面代码中，store.dispatch接受一个Action对象作为参数，将它发送出去。

结合Action Creator，这段代码可以改写如下：

store.dispatch(addTodo('Learn Redux'));

Rdeucer

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

const reducer = function (state,action){
    //...
    return new_state;
};

整个应用的初始状态，可以做我State的默认值。
例如：

const defaultState = 0;
const reducer = (state = defaultState，action)=>{ 
    switch(action.type){
        case 'ADD':
            return state + action.parload;
        default:
            return state;
}
};
const state = reducer(1,{
    type:'ADD',
    payload：2
});

在上面的栗子中，reducer函数收到名为ADD的Action以后，就返回一个新的State，作为加法计算结果，其他运算的逻辑（比如减法），也可以根据Action的不同方法来实现。
实际应用中，Reducer函数的store.dispatch方法会触发Reducer的自动执行。为此，store需要知道reducer函数，做法就是在生成store的时候，将reducer传入createstore方法

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

createStore接受reducer作为参数，生成一个新的store。所以以后每当store.dispatch发送过来一个新的Action，就会自动调用reducer，得到新的state