Redux使用

1.安装Redux

        yarn add redux 或者 npm i redux

2.Redux有三个核心概念

        action(动作):描述要做的事情,相当于公司里面要做的事情，比如打扫卫生这个事等

        reducer(函数):更新状态,相当于公司的员工，负责执行的

        store(仓库):整合action和reducer,相当于公司的老板

        流程:老板（store）分配（dispatch）要做的事情（action）给员工（reducer），员工干完活把结果交给老板

 

 

 3.Redux核心概念action

        1.action:描述要做的事情,项目中每个功能都是action,比如(计算器加减,添加任务,删除任务,登录,退出).

        2.特点:只描述做什么,本质就是一个JS对象,必须有type属性,用于区分动作的类型,可以通过payload携带额外的数据

export const incremen = {
    type: 'INCREMENT',
    payload: 5,
}

export const decrement = {
    type: 'DECREMENT',
    payload: 5,
}

4.Redux核心概念action creator

        使用函数(actionCreator)去创建一个action

        好处:可以使用函数创建action,通过传参把不一样数据传递过去,我们把action的函数叫做actionCreator,代码更简洁,容易复用

        store/actions.js

export const increment = (payload) => ({
    type: 'INCREMENT',
    payload,
})

export const decrement = (payload) => ({
    type: 'DECREMENT',
    payload,
})

5.Redux核心概念reducer

        reducer：本质上是一个函数，作用是根据 action 来更新状态，有如下特点。

        函数签名为：(prevState, action) => newState。

        接收上一次的状态和 action，根据 action 的类型执行对应的操作，最终返回新的状态。

        原则：不要在 reducer 函数内部直接修改 state。

store/reducers.js

export default function counter(state = 10, action) {
    // 处理各种各样的 action
    switch (action.type) {
        case 'INCREMENT':
            return state + action.payload
        case 'DECREMENT':
            return state - action.payload
        default:
            // 记得要有默认返回的处理
            return state
    }
}

 6.Redux核心概念 纯函数

        纯函数是函数式编程中的概念，对于纯函数来说，相同的输入总是得到相同的输出

• 纯函数原则

  a，不得改写参数

  b，不能调用 Date.now() 或者 Math.random() 等不纯的方法，因为每次会得到不一样的结果

  c，不能使用全局变量

  d，没有副作用，副作用：AJAX 请求、操作本地数据、或者操作函数外部的变量等。

• 好处：方便测试，性能优化。

• 为什么说纯函数呢？因为 reducer 就必须是一个纯函数。

        7.Redux核心概念store

                 store：仓库，是 Redux 的核心，负责整合 action 和 reducer。

                使用:

                a，一个应用只有一个 store。

                b，创建：const store = createStore(reducer)。

                c，获取数据：store.getState()。

                d，更新数据：store.dispatch(action)。       

                其他 API

                a，订阅（监听）状态变化：const unSubscribe = store.subscribe(() => {})，注意要先订阅，后续的更新才能被观测到。

                b，取消订阅状态变化：unSubscribe()

// store: 整个数据的仓库，负责关联 reducer 和 action，通过 store 对象可以给 reducer 分配 action
import { createStore } from 'redux'
import reducer from './reducers'
const store = createStore(reducer)
export default store