#yyds干货盘点#Redux 的基本使用

1.核心概念

1.什么是Redux？

Redux是一个管理状态（数据）的容器，提供了可预测的状态管理

2.什么是可预测的状态管理？

数据 在什么时候， 因为什么， 发生了什么改变，都是可以控制和追踪的，我们就称之为预测的状态管理

3.为什么要使用Redux？

React是通过数据驱动界面更新的，React负责更新界面， 而我们负责管理数据
默认情况下我们可以在每个组件中管理自己的状态， 但是现在前端应用程序已经变得越来越复杂
状态之间可能存在依赖关系（父子、共享等），一个状态的变化会引起另一个状态的变化
所以当应用程序复杂的时候， 状态在什么时候改变，因为什么改变，发生了什么改变，就会变得非常难以控制和追踪
所以当应用程序复杂的时候，我们想很好的管理、维护、追踪、控制状态时， 我们就需要使用Redux

4.Redux核心理念

通过 store 来 保存数据
通过 action 来 修改数据
通过 reducer 来 关联 store 和 action

2.三大原则

1.Redux三大原则

单一数据源
整个应用程序的state只存储在一个 store 中
Redux并没有强制让我们不能创建多个Store，但是那样做并不利于数据的维护
单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改
State是只读的
唯一修改State的方法一定是触发action，不要试图在其他地方通过任何的方式来修改State
这样就确保了View或网络请求都不能直接修改state，它们只能通过action来描述自己想要如何修改stat；
这样可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心race condition（竟态）的问题；
使用纯函数来执行修改
通过reducer将 旧state和 action联系在一起，并且返回一个新的State：
随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分
但是所有的reducer都应该是纯函数，不能产生任何的副作用

2.什么是纯函数

返回结果只依赖于它的参数，并且在执行过程里面没有副作用

// 纯函数
function sum(num1, num2){
    return num1 + num2;
}

// 非纯函数
let num1 = 10;
function sum(num2){
    return num1 + num2;
}

// 纯函数
const num1 = 10;
function sum(num2){
    return num1 + num2;
}

3.基本使用

准备工作
创建 demo 目录
cd demo
npm init -y #初始化一个node项目
npm install --save redux #安装redux
redux的使用
store.subscribe() #监听函数（一旦 state 发生变化，就自动执行这个函数）

store.getState() #获取当前的 state

store.dispatch() #派发 action（用于修改state）

// 导入redux
const redux = require('redux');

// 1.定义一个状态（数据）
let initialState = {
    count: 0
}

// 2.利用store保存状态
const store = redux.createStore(reducer);

// 3.利用action修改状态
const addAction = {type:'ADD_COUNT', num: 1};
const subAction = { type: 'SUB_COUNT', num: -1};

// 4.利用reduce关联store与action
function reducer(state = initialState, action){
    switch(action.type){
        case 'ADD_COUNT':
            return { count: state.count + action.num};
        case 'SUB_COUNT':
            return { count: state.count + action.num };
        default:
            return state;
    }
}

// 在组件中如何使用？

// 1.监听状态的改变
store.subscribe(()=>{
    console.log(store.getState());
}
)

// 2.获取Store中存储的状态
console.log(store.getState());

// 3.修改Store中存储的状态
store.dispatch(subAction);
// console.log(store.getState());

当前代码存在的问题
1.store、action、reducer代码都写在一个文件中，不利于维护
2.action和reducer中都是使用字符串，来指定和判断操作类型， 写错不报错
3.action中的操作写死了，不够灵活
优化

const redux = require('redux');

// 定义常量
const ADD_COUNT = 'ADD_COUNT';
const SUB_COUNT = 'SUB_COUNT';
// 定义一个状态
let initialState = {
    count: 0
};

// 利用store来保存状态（state）
const store = redux.createStore(reducer);

// 利用action来修改状态
// const addAction = {type:ADD_COUNT, num: 1};
// const subAction = {type:SUB_COUNT, num: -1};
const addAction = (num)=>{
    return {type:ADD_COUNT, num: num};
};
const subAction = (num)=>{
    return {type:SUB_COUNT, num: num};
};

// 利用reducer将store和action串联起来
function reducer(state = initialState, action) {
    switch (action.type) {
        case ADD_COUNT:
            return {count: state.count + action.num};
        case SUB_COUNT:
            return {count: state.count - action.num};
        default:
            return state;
    }
}

// 在组件中如何监听状态的改变？
store.subscribe((a)=>{
    console.log(store.getState());
});

// 在组件中如何从Store中获取存储的状态？
console.log(store.getState());

// 在组件中如何修改Store中存储的状态？
// store.dispatch(addAction(5));
store.dispatch(subAction(5));

// console.log(store.getState());

4.结合 React

• npm install --save redux
• 在src目录下，新建store目录
  store/constants.js

// 定义常量
export const ADD_COUNT = 'ADD_COUNT';
export const SUB_COUNT = 'SUB_COUNT';

store/store.js

import {createStore} from 'redux';
import reducer from './reducer';

// 利用store来保存状态（state）
const store = createStore(reducer);

export default store;

store/action.js

import {
    ADD_COUNT,
    SUB_COUNT
} from './constants';

// 利用action来修改状态
// const addAction = {type:ADD_COUNT, num: 1};
// const subAction = {type:SUB_COUNT, num: -1};
export const addAction = (num)=>{
    return {type:ADD_COUNT, num: num};
};
export const subAction = (num)=>{
    return {type:SUB_COUNT, num: num};
};

store/reducer.js

import {
    ADD_COUNT,
    SUB_COUNT
} from './constants';

// 定义一个状态
let initialState = {
    count: 666
};

// 利用reducer将store和action串联起来
function reducer(state = initialState, action) {
    switch (action.type) {
        case ADD_COUNT:
            return {count: state.count + action.num};
        case SUB_COUNT:
            return {count: state.count - action.num};
        default:
            return state;
    }
}

export default reducer;

使用 React-Redux

什么是 React-Redux
React-Redux是Redux官方的绑定库,能够让我们在组件中更好的读取和操作Redux 保存的状态
安装react-reduct： npm install react-reduct
index.js

import ReactDOM from 'react-dom';
import React from 'react';
import App from './App';
import { Provider } from 'react-redux'
import store from './store/store';

ReactDOM.render(
    // 只要利用Provider将祖先组件包裹起来
    // 并且通过Provider的store属性将Redux的store传递给Provider
    // 那么就可以在所有后代中直接使用Redux了
    <Provider store={store}>
        <React.StrictMode>
            <App/>
        </React.StrictMode>
    </Provider>
    , document.getElementById('root'));

components/Home.js

import React from 'react';
import { connect } from 'react-redux';
import {addAction, subAction} from '../store/action';

class Home extends React.PureComponent{
    render(){
        return (
            <div>
                 {/* 3.通过props来使用redux中保存的数据 */}
                <p>{this.props.count}</p>
                <button onClick={()=>{this.props.increment()}}>递增</button>
            </div>
        )
    }
}
// 1.mapStateToProps方法：告诉React-Redux, 需要将store中保存的哪些数据映射到当前组件的props上
const mapStateToProps = (state)=>{
    return{
        count: state.count
    }
}
// 2.mapDispatchToProps方法：告诉React-Redux, 需要将哪些派发的任务映射到当前组件的props上
const mapDispatchToProps = (dispatch)=>{
    return{
        increment(){
            dispatch(addAction(1));
        }
    }
}
// 4.connect：关联Home组件与mapStateToProps和mapDispatchToProps方法
export default connect(mapStateToProps, mapDispatchToProps)(Home);