redux学习笔记

redux是什么？

Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器，类似于vue中的vuex，通常配合React共同使用。Redux基于简化版本的Flux框架，Flux是Facebook开发的一个框架。在标准的MVC框架中，数据可以在UI组件和存储之间双向流动，而Redux严格限制了数据只能在一个方向上流动。 Redux整体框架图如下：

什么时候需要使用Redux？

React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。在react中的数据由props与State构成，数据就像瀑布中的水自上而下流动，属于单向数据流。而这两者的区别也很简单，对于一个组件而言，如果说props是外部传递进来的属性，那么State便是组件内部自身提供的属性。然后这个组件又可以将自己的State与props作为props继续传递给自己的子级。
当两个组件之间需要进行通行的时候，React常常通过状态提升来解决。由于react属于单向数据流，当有多个组件需要使用相同的数据时，比如兄弟组件相互感知数据变化，在react中我们一般推荐将这份数据提升到两兄弟的共同父组件中进行管理，这便是所谓的状态提升。然而在实际开发中，组件之间的关系往往比我们学习时遇到的例子要复杂的多，高层级组件嵌套，兄弟组件通信，子传父等等都是在写组件时很常见的问题。
因此单独使用React在构建大型项目、用户间数据交互复杂、组件间需要共享等情况下时是无法满足需求的。这时我们可以使用 Redux 或者其他状态管理工具，因为不按照一定规律处理状态的读写，代码很快就会变成一团乱麻。你需要一种机制，可以让我们在同一个地方查询状态、改变状态、传播状态的变化，显然，redux就提供了这种机制。
​

Redux的设计思想

Redux的设计思想总结为两句话：

• Web 应用是一个状态机，视图与状态是一一对应的。
• 所有的状态，保存在一个对象里面。

​

基本概念-Store

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

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

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

基本概念-state

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。
​

基本概念-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 对象作为参数，将它发送出去。
​

基本概念-Reducer()

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.payload;     
    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。
为什么这个函数叫做 Reducer 呢？因为它可以作为数组的reduce方法的参数。请看下面的例子，一系列 Action 对象按照顺序作为一个数组。

const actions = [   
  { type: 'ADD', payload: 0 },   
  { type: 'ADD', payload: 1 },  
  { type: 'ADD', payload: 2 } 
]; 
const total = actions.reduce(reducer, 0); // 3 

上面代码中，数组actions表示依次有三个 Action，分别是加0、加1和加2。数组的reduce方法接受 Reducer 函数作为参数，就可以直接得到最终的状态3。
​

基本概念-store.subscribe()

Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

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

显然，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。
store.subscribe方法返回一个函数，调用这个函数就可以解除监听。

let unsubscribe = store.subscribe(() =>   console.log(store.getState()) ); 
unsubscribe();

redux结合react案例

实现两个按钮的加减：

1、首先使用JSX语法定义两个React的函数式组件，分别表示数值和加减：

//+按钮
const AddCnt = (props) => (
    <div>
    <h1>{props.value}</h1>
    <button onClick={props.onIncrement}>+</button>
    </div>
  );
//-按钮
const DecCnt = (props) => (
  <div>
  <h1>{props.value}</h1>
  <button onClick={props.onDecrement}>-</button>
</div>
);

2⃣️、要定义Store，先定义两个Reduce处理函数，分别是加减state，state的初始值分别设置为100和0,然后将两个Reducer组合成一个Reducer函数：

const reducerAdd = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    default: return state;
  }
};

const reducerDec = (state = 100, action) => {
  switch (action.type) {
    case 'DECREMENT': return state -1;
    default: return state;
  }
};

const reducerAll = {
  add: reducerAdd,
  dec: reducerDec
};

const rootReducer = combineReducers(reducerAll);

3⃣️、利用reducer创建Store：

//使用两个组合reduce来创建store对象
let store = createStore(rootReducer);

4⃣️、创建虚拟函数并渲染到界面,同时为Store对象设置监听事件，监听时间函数为render函数，该函数执行会重新渲染界面。

const render = () => {
  ReactDOM.render(
    <div>
    <AddCnt
    	value={store.getState().add}
			onIncrement={() => {store.dispatch({type: 'INCREMENT'});console.log("add");}}
		/>
		<DecCnt
			value={store.getState().dec}
			onDecrement={() => {store.dispatch({type: 'DECREMENT'});console.log("del");}}
		/> 
		</div>,
		document.getElementById('root')
);
};
render();
  store.subscribe(render);

​

上述代码的执行步骤是，

• 首先初始化了Store容器和DOM树，并完成了渲染，
• 当按下按钮后按钮中绑定了点击事件，在事件中调用了props.onIncrement，其实就是调用了() => {store.dispatch({type: ‘INCREMENT’}，从而使得store分发action任务，
• 在Reducer执行action对应的事件中改变了state，或加或减，
• 然后store监听到state改变，从而调用render重新渲染了界面，完成了整个逻辑功能。