React——Redux

React-Redux

使用Redux

• 安装

cnpm i --save-dev redux
cnpm i --save-dev react-redux

• redux和react-redux的区别
  1. redux：js的状态管理，createStore
  2. react-redux：为了在react中更加容易地使用redux：connect、provider

Redux的一些对象

1. Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。Redux 提供createStore这个函数，用来生成 Store。

import { createStore } from 'redux';
const store = createStore(fn);
//上面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。

2. 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 是什么样，反之亦然。

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

//Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置。
//action就类似于一个事件的参数，它告诉reducer数据应该如何改变，改变的大小是多少
const action = {
  type: 'ADD_TODO',
  num:1
};
//也可以定义一个Action生成器
const ADD_TODO = '添加 TODO';

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

4. store.dispatch()。store.dispatch()是 View 发出 Action 的唯一方法。类似触发事件，Action为事件携带的事件参数。

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

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

5. Reducer。在执行完dispatch后，Action会被store截取并传入到reducer中，reducer定义了一系列的对state的逻辑处理，相当于事件处理器（Handler）state改变后，相对的View也会发生变化。

//Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。
const reducer = function (state, action) {
  // ...
  return new_state;
};
//Reducer即可手动调用也可使用store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

6. Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出。

   纯函数是函数式编程的概念，必须遵守以下一些约束。

   • 不得改写参数
   • 不能调用系统 I/O 的API
   • 不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果