react中使用redux

明确概念：

Reducer

• 是一个纯函数，接收旧的state和action，返回新的state
• 与被传入Array.pototype.reduce(reducer, ?initialValue)里的回调函数属于相同类型
• 保持reducer纯净十分重要，永远不要在reducer中执行如下操作：

1. 修改传入参数
2. 执行有副作用的操作（如API请求和路由跳转）
3. 调用非纯函数（如Date.now() 或 Math.random()）

reduce

• 数组的reduce

array=[1,2,3,4,5]
const reducer = (sum ,currentValue)=> (
// 第一次循环，sum 等于1，currentValue等于2
// 之后循环currentValue被依次顺序赋值，sum做累加结果
// 循环结束，返回最终累加结果
  return sum + currentValue
)
array.reduce(reducer)

redux

• 什么是redux

1. redux是一个纯粹的状态管理器，不仅限react可以使用。将动作(action) 变换成 state 转换函数(reducer)，然后放到一个统一的地方(store)来 setState
2. 数据处理方式：默认只支持同步，实现异步需要添加中间件（🌰：redux-thunk 和 redux-logger）

npm install redux-thunk edux-logger --S

3. 专门用于react的redux是：react-redux

npm install redux --S
npm install react-redux --S

4. 数据处理流程：

• redux用法

1. 创建仓库（store）文件夹 (例如：xxxStore.js)。编写如下内容：

import {createStore} from 'redux'
// state有默认值，action从外界传入
function counterReducer(state = 0, action) {
    switch (action.type) {
        case "add":
        return state + 10
            
        case "subtraction":
        return state - 20
            
        default:
            return state
    }
}

2. 修改index.js

import store from './store/ReactReduxStore'
import {Provider} from 'react-redux'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
        <App />
    </Provider>
    
  </React.StrictMode>,
  document.getElementById('root')
);

3. 在组件中，导入仓库，向props中添加事件和属性

import React, {Component} from 'react'
import {connect} from 'react-redux'

// react-redux 提供了两个重要API provider为后代组件提供store connect为组件提供数据和变更方法

class 组件名 extends Component {
    render() {
        console.log(this.props);
        
        const {counter, add, sub} = this.props

        return (
        <div>
            <div>react-redux</div>
            <p>{counter}</p>
            <button onClick={add}>add</button>
            <button onClick={sub}>subtraction</button>
        </div>
        )
    }
}

export default connect(
// 向props中添加事件和属性
    // state
    state => {
        console.log(state);
        return {counter: state}
    },

    // dispatch
    {
        add: () => {
            return {type: "add"}
        },
        sub: () => {
            return {type: "subtraction"}
        }

    }
)(组件名)