Redux基础学习

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

一、redux概述

• 什么是redux

如果你使用过vue，对vuex肯定了解。redux其实就是类似vuex的一种可预测的状态容器。

• redux的三大核心

1. 整个应用只有唯一一个数据源Store
2. State是只读的只能通过触发Action来修改
3. State 的更改必须写成纯函数，每次更改总是返回一个新的 State，在 Redux 里这种函数称为 Reducer。

二、 如何使用redux

使用redux你需要理解三个最主要的部分：Action、Reducer、Store。

1. Action

action你可以理解为是一个对象，但是这个对象必须包含一个type属性，这个属性可以理解为标识某个动作的行为类型，通过 store.dispatch() 方法来发送。

我们通常会用一个函数来构建Action，比如：

function addItem(text) {
  return {
    type: 'ADD_ITEM',
    value: '小Y'
  }
}

2. Reducer

Reducer用来响应Action，然后 return 把数据给到store，他是一个纯函数，接受oldState 和 action 两个参数，然后返回一个新的state。

const reducer = (state = {}, action) => {
  switch(action.type) {
    case 'ADD':
      return Object.assign({}, state, action)
    default:
      return state
  }
}

3. Store

我们通过Store来吧Action和Reducer联系起来。我们通过createStore函数接受reducer来创建store。

const store = createStore(reducer)

三、示例

现在我们来通过一个例子熟悉一下Redux。当然需要先进行安装：

npm install --save redux

1. 首先我们新建一个 action 文件

export const addAction = () => {
  return {
    type: 'ADD',
    value: '增加'
  }
}

2. 新建一个 reducer 文件

const initState = {
  count: 0
}

export const reducer = (state = initState, action) => {
  switch(action.type) {
    case 'ADD':
      return Object.assign({}, state, action)
    default:
      return state
  }
}

3. 新建 store 文件

import { createStore } from 'redux';

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

const store = createStore(reducer)

export default store

ok，现在我们可以看到通过createStore传入我们编写的reducer作为参数创建了store。

4. 我们新建一个 Home 组件，在 App 中引入：

import React, { useEffect, useState } from 'react'
import store from '../store'
import { addAction } from '../action'

const Home = () => {

  const [value, setValue] = useState(store.getState().value)

  const handleClick = () => {
    store.dispatch(addAction())
    setValue(store.getState().value)
  }
useEffect(() => {
  // subscribe() 方法注册回调函数监听 State 的更改；取消监听unsubscribe()
  store.subscribe(() => {
    console.log(111, store.getState())
  })
})
  return (
    <>
      <h1>{value}</h1>
      <button onClick={handleClick}>点击</button>
    </>
  )
}

export default Home

点击按钮，我们可以看到如下图所示效果：

总结

我们点击按钮，通过dispatch派发我们的addAction，在我们的reducer中找到type='ADD'的判断分支，处理返回了新的state回store，我们就能访问到新的数据了。