React—11—redux

---

 一、redux概念

◼ JavaScript开发的应用程序，已经变得越来越复杂了：

 JavaScript需要管理的状态越来越多，越来越复杂；

 这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等，也包括一些UI的状态，比如某些元素是否被选中，是否显示

加载动效，当前分页；

◼ 管理不断变化的state是非常困难的：

 状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化；

 当应用程序复杂时，state在什么时候，因为什么原因而发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪；

◼ React是在视图层帮助我们解决了DOM的渲染过程，但是State依然是留给我们自己来管理：

 无论是组件定义自己的state，还是组件之间的通信通过props进行传递；也包括通过Context进行数据之间的共享；

 React主要负责帮助我们管理视图，state如何维护最终还是我们自己来决定；

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

◼ Redux除了和React一起使用之外，它也可以和其他界面库一起来使用（比如Vue），并且它非常小（包括依赖在内，只有2kb）

 

 

Redux的三大原则

◼ 单一数据源

 整个应用程序的state被存储在一颗object tree中，并且这个object tree只存储在一个 store 中：

 Redux并没有强制让我们不能创建多个Store，但是那样做并不利于数据的维护；

 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改；

◼ State是只读的

 唯一修改State的方法一定是触发action，不要试图在其他地方通过任何的方式来修改State：

 这样就确保了View或网络请求都不能直接修改state，它们只能通过action来描述自己想要如何修改state；

 这样可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心race condition（竟态）的问题；

◼ 使用纯函数来执行修改

 通过reducer将 旧state和 actions联系在一起，并且返回一个新的State：

 随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分；

 但是所有的reducer都应该是纯函数，不能产生任何的副作用；

 

 

二、在非脚手架中使用redux

redux是一个单独的库，所以可以在普通项目、vue、react中使用。

三、react中使用redux

我的理解是，createStore时必须有一个reducer函数，

store会主动调用reducer函数返回的state作为初始state；

 

后续，当我们使用dispatch取修改的时候，redux会主动调用reducer，然后reducer内部去做修改然后返回一个全新的state，

由于createStore是跟reducer强绑定的，所以store的数据也就跟着改变了。

 

 

第一：npm install redux

第二：专门建一个store文件夹，去实例化一个store，并且这个store的数据是由reducer提供的。

第三:其他组件可以通过store.getState取获取store数据的初始值

第四:想要修改store里的值，需要用到store.dispatch({type:'xxxxxx', params);

第五：当我们dispatch时，redux会自动帮助我们调用reducer函数，所以我们需要在reducer函数里做处理

reducer函数有两个参数，一个是旧state，一个是本次提出dispatch的action对象。

经过处理后，返回一个新的state（记住，reducer是一个纯函数，所以不要修改原旧state，要返回一个新的state。）

第六: redux把旧的state更新成reducer新返回的state

第七：通知所有订阅过（store.subcribe()）的组件

 

 

import { createStore } from 'redux';
import * as actionTypes from './constants';// 定义常量
export const ADD_NUMBER = 'add_number';
export const SUB_NUMBER = 'sub_number';// 定义action
export const addNumberAction = num => ({type: ADD_NUMBER,num});export const subNumberAction = num => ({type: SUB_NUMBER,num});// 定义reducer函数
const initialState = {counter: 0
};
export function reducer(state = initialState, action) {switch (action.type) {case actionTypes.ADD_NUMBER:return { ...state, counter: state.counter + action.num };case actionTypes.SUB_NUMBER:return { ...state, counter: state.counter - action.num };default:return state;}
}// 实例化store
const store = createStore(reducer);export default store;

 

import React, { PureComponent } from 'react';

import Home from './pages/home';

import Profile from './pages/profile';

import './style.css';

import store from './store';

export class App extends PureComponent {constructor() {super();this.state = {counter: store.getState().counter};}componentDidMount() {store.subscribe(() => this.setState({ counter: store.getState().counter }));}render() {const { counter } = this.state;return (<div><h1>App{counter}<Home></Home><Profile></Profile></h1></div>
    );}
}export default App;

 

import React, { PureComponent } from 'react'
import store from "../store"
import { addNumberAction } from '../store/counter'export class Home extends PureComponent {constructor() {super()this.state = {counter: store.getState().counter,}}componentDidMount() {store.subscribe(() => {const state = store.getState()this.setState({ counter: state.counter })})}addNumber(num) {store.dispatch(addNumberAction(num))}render() {const { counter } = this.statereturn (<div><h2>Home Counter: {counter}</h2><div><button onClick={e => this.addNumber(1)}>+1</button><button onClick={e => this.addNumber(5)}>+5</button><button onClick={e => this.addNumber(8)}>+8</button></div></div>
    )}
}export default Home