乐趣区

关于javascript:redux的三个概念与三大核心

jiezi

1、什么是 redux?
一个组件里可能会有很多的状态，比方管制某个内容显示的 flag，从后端获取的展现数据，那么这些状态能够在本人的单个页面进行治理，也能够抉择别的治理形式，redux 就是是一种状态治理的形式。

2、为什么要用 redux?
(1) 数据共享，当咱们的很多页面都要用到同一数据时，就能够把数据放到 redux 中，达到状态共享的目标。
(2) 合并治理状态，业务当中可能会有很多的状态须要保护，且各个状态之间可能还有相互依赖的关系，不对立治理的话很难追踪状态的变动。

3、redux 的根底概念
(1) store
store 是一个仓库，用来存储数据，它能够获取数据，也能够派发数据，还能监听到数据的变动。

(2) action
action 了解为动作，action 的值个别为一个对象，格局如 {type: “”, data: “”}，type 是必须要的，因为 reducer 解决数据的时候要依据不同的 type 来进行不同的操作。

(3) reducer
reducer 是初始化以及解决派发的 action 的纯函数。

4、如何应用 redux？
首先装置 redux 的依赖，npm i redux -D
(1) 定义 action

export const countAction = (num) => ({type: "ADD_NUMBER"，data: num})

(2) 定义解决的 action 的 reducer

export function counterReducer(prevState = 0, action){switch(action.type){
          case 'ADD_NUMBER':
              return prevState + num;
          default 
              return prevState;
     }
}

(3) 创立 store

import {createStore} from 'redux'
import {counterReducer} from './counterReducer'
export const store = createStore(counterReducer)

到这里，store 就创立实现了，在组件里能够间接引入 store 和 action，进行派发 action 的操作，此时有一个 Home 的组件，咱们要在这里更改 state 中的数据。

import {store} from './store'
import {countAction} from './countAction'
store.dispatch(countAction(5))
store.getState() // 5

5、redux 的三大外围
(1) 繁多数据源
当咱们有多个数据须要放到 redux 中治理时，是放在一个对象里，这个对象放在 store 中治理，尽管 redux 并没有强制只能创立一个 store，然而多个数据源的话不那么容易治理，繁多的数据源能够更好的追踪状态的变动。

(2) state 是只读的
想要扭转 state，无奈在组件上间接手动批改 state 的值，这样能够保障状态不会被随便扭转，惟一的形式就是派发 action，而是通过集中管理的模式去扭转 state。

(3) reducer 是纯函数
纯函数指的是有雷同的输出必然有雷同的输入，在这种状况下，不能够批改入参，也不能发送网络申请，也不能进行获取随机数这样的操作，通过 reducer 将上一个 state 的状态和以后派发的 action 连接起来，返回一个新的状态。

6、redux 如何进行异步操作?
redux 中派发的 action 默认是只能进行同步的操作的，action 被规定为一个对象，那如果想要在 redux 中进行异步操作，比方发送网络申请该怎么做？

这个时候须要用到中间件，罕用的中间件有 redux-thunk 和 redux-saga，须要装置依赖 npm i redux-thunk -D/ npm i redux-sage -D

redux-thunk 容许派发的 action 为一个函数，能够在这个函数中进行异步申请，申请执行实现之后再派发一个同步的 action，用于批改 store 中的数据。

redux-saga 派发的 action 依然为一个对象，然而 saga 在外侧拦挡 action，应用生成器函数来监听 action，当派发的 action 中的 type 为监听的 type 时，再进行网络申请的发送，以及扭转 store 中的数据。

这里演示一下 redux-thunk，在定义 store 时，须要将中间件传入

import {createStore, applyMiddleware} from 'redux'
import {counterReducer} from './counterReducer'
import thunk from 'redux-thunk'
export const store = createStore(counterReducer，applyMiddleware(thunk))

action 就能够写成函数的模式了

import {countAction} from './countAction'
export const getInfo = (data) => {return (dispatch) => {
          // 执行异步操作，异步操作执行实现后，再派发一个同步的 action
          // 这里用 fetch 做一个演示，发送网络申请后，更改之前的 count 的值
          fetch('/')
              .then(xhr=>xhr.text())
              .then(result=>dispatch(countAction(10)))
     }
}

7、拆分 reducer

当 reducer 须要解决的逻辑比拟多时，一个 reducer 须要进行十分多的 switch case 的判断，其中有获取异步申请数据的、有全局保留的状态，这时候逻辑就会比拟芜杂，此时能够将 reducer 拆分，而后再进行合并。

假如此时有两个 reducer，别离为 countReducer、userInfoReducer，别离的状态保留在 store 的 countInfo 和 userInfo，此时能够应用 combineReducer 这个办法来合并

import countReducer from './countReducer'
import userInfoReducer from './userInfoReducer'
import {combineReducers} from 'redux'
const reducer = combineReducers({
    countInfo: countReducer,
    userInfo: userInfoReducer 
})
export default reducer

此时返回的 reducer 依然是一个纯函数，combineReducer 这个函数就是顺次执行传入的 reducers，如果 store 里贮存的值产生了变动，就返回新的 state，如果没有变动，就返回原来的 state。

退出移动版