redux

安装redux

npm i redux   本人比较喜欢使用npm 各位也可以使用yarn add redux 等

核心概念

store , action , reducer

• store: 仓库 , 存储了数据 , 管理者 , 管理 action 和 reducer
• action: 动作, Action 描述发生的事情 . 每一个动作都可以是一个action , 比如登录 , 退出 , 添加任务等 . 改变数据唯一方式就是通过action
• reducer: Store 收到Action以后 , 不是自己处理 , 而是派发 dispatch 给reducer进行处理.reducer处理完成之后返回新的状态

Store

store就是保存数据的地方 , 你可以把它看成一个容器或者仓库 , 整个应用只能有一个store

• Redux提供 createStore 这个函数 , 用来生成 Store

为了方便维护 在src下新建一个reducer文件夹=>index.js 写入如下代码

function reducer(){}
export default reducer

 在index.js中

import reducer from './reducer'
import { createStore } from 'redux'
// 创建store , 必须指定reducer
const store = createStore(reducer)

• 通过 store.getState() 可以获取数据

action

action是一个对象. 其中的 type 属性是必须的 , 表示Action的名称 , 其余属性可以自行设置

action描述的是需要做的事情和携带的数据

在src下创建一个actions文件夹=> index.js

// action 就是一个一个的js对象
// action 必须有type属性 , 建议type属性的值纯大写
// action 还可以有额外的其他属性
// action的作用: 描述要做的事情 , 以及需要的数据
export const addUser = {
  type: 'ADD_USER',
  username: '张三'

}

export const add = {
  type: 'ADD',

}

action creator

有多少动作 , 就会有多少个action , 比如添加张三用户 , 添加李四用户 ,删除不同的id任务, 这样一个一个提供action会非常麻烦 , 

定义一个函数来生成Action ,  这个函数就叫 Action Creator

action creator的作用:用于生成action

// export function addUser(username) {
//   return {
//     type: 'ADD_USER',
//     username
//   }
// }

// 可以简写为
export const addUser = (username) => ({
  type: 'ADD_USER',
  username
})

reducer

reducer就是一个函数 , 它接收 Action 和当前 State 作为参数 , 返回一个新的State

整个应用的初始状态, 可以作为state的初始值

function reducer(state = 0, action) {
  // 处理action
  return state
}
export default reducer

dispatch 派发 action

通过 store.dispatch(action) 可以派发任务 , 把action交给reducer处理

各文件的代码

store文件夹=> actions.js

export const add = () => {
  return {
    type: 'ADD'
  }
}

export const ww = xw => {
  return {
    type: 'XW',
    xw
  }
}

store文件夹=>reducer.js

function reducer(state = 0, action) {
  // 处理action
  if (action.type === 'ADD') {
    return state + 1
  }
  if (action.type === 'XW') {
    return state = '小吴是帅比'
  }
  return state
}
export default reducer

其实应该新建一个store文件夹=>index.js

import { createStore } from 'redux'
import { add, ww } from '../actions'
import reducer from '../reducer'
const store = createStore(reducer)

// 创建store , 必须指定reducer
console.log('store', store);
// 获取状态 store.getState = 0
console.log('获取状态', store.getState());

// store派发执行任务
store.dispatch(add())

// 获取状态 store.getState = 1
console.log(store.getState());

// 带参数的派发任务
store.dispatch(ww('小吴是帅比'))
console.log(store.getState());

export default store

在index.js文件中 

import store from './store'
store.getState()

react-redux

npm i redux react-redux  

redux v4.2

store.ts

// redux v4.2 createStore 弃用
import { legacy_createStore as createStore } from "redux"
import { Reducer } from "./reducer"
export const store = createStore(Reducer)

reducer.ts

export const Reducer = (
  state = { value: 0 },
  action: { type: string; payload: number }
) => {
  switch (action.type) {
    case "increment":
      return { value: state.value + action.payload }
    case "counter/decremented":
      return { value: state.value - 1 }
    default:
      return state
  }
}

获取数据

import { useSelector } from "react-redux"
  const count = useSelector((state) => state)
  console.log(count) // { value : 0 }

action.ts

修改数据方法

// 增加 value
export const increment = (payload: number) => ({ type: "increment", payload })

调用方法

import { useSelector, useDispatch } from "react-redux"
  const dispath = useDispatch()
  <Button onClick={() => dispath(increment(2))}>增加</Button>  // value : 2