学习笔记（一）: redux 的用法

redux 的用法

核心概念 ： stroe：redux状态存储中心 action： 状态变更前置方法中心 reducer 状态处理中心

            组件通过dispatch一个action通知store ，store将action转给reducer进行处理，最后将返回的新数据交给store，组件再store中取

目录结构

        components // 存放容器组件以及ui组件
        redux 
              actions // 存放一个个action文件
                    count.js
                    person.js
              reducers // 存放一个个reducers文件
                    count.js
                    person.js
              store.js 
              constant.js // 定义常量文件,例如action的type
        index.js
        App.js

store

一、核心内容：（1） 创建全局唯一store； createStore(allReducers,applyMiddleware(thunk)) （2） 合并所有的状态处理reducers； combineReducers({reducer1,reducer2}) （3） 处理异步action，运用redux开发工具； composeWithDevTools(applyMiddleware(thunk)) 二、代码示例：

import { createStore, applyMiddleware,combineReducers } from "redux";
import {composeWithDevTools} from 'redux-devtools-extension'
import countReducer from './reducers/count'
import personReducer from "./reducers/person";
import thunk from "redux-thunk";

// 汇总所有的reducers
// const allREducer = combineReducers({
//   countReducer,
//   personReducer,
// })
export default createStore(combineReducers({countReducer,personReducer}), composeWithDevTools(applyMiddleware(thunk)))

action

一、核心内容：（1）同步action，返回action对象的一个函数； （2）异步action，返回一个函数的函数； 二、代码示例：

import { INCREMENT, DECREMENT } from "../constant"

// 同步action 返回 对象
export const createIncrementAction = (data) => ({
  type: INCREMENT,
  data
})
// 异步action 返回函数
export const createIncrementActionAsync = (data, delay) => {
  return (dispatch) =>{
    setTimeout(() => {
      dispatch(createIncrementAction(data))
    }, delay)
  }
}

reducer 纯函数

一、核心内容： （1） 初始化所存储的state值； （2） 根据action处理更新state的值； 二、代码示例：

// reducer 为纯函数，不管理判断异步
// 初始化状态 在 default中返回
import { INCREMENT, DECREMENT } from "../constant"
const initstate = 0
export default function countReducer(preState = initstate, action) {
  const {type, data} = action
  switch (type) {
    case INCREMENT:
     return preState + data
     case DECREMENT:
      return preState - data
    default:
      return preState
  }
}

index.js

一、核心内容： （1） react初始化挂载dom； （2） 将store对象通过provider容器组件动态分发给需要使用store的组件；

二、代码示例：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
// Provider 为容器分发store 
import {Provider} from 'react-redux'
ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>
, document.getElementById('root'))

components

一、核心内容： （1）编写ui组件展示内容与交互； （2）通过connect编写容器组件建立ui组件与store的联系；

二、代码示例：

import React from 'react'
// 引入 connect
import { connect } from "react-redux";
import {createIncrementAction,createdecrementAction, createIncrementActionAsync} from '../redux/actions/count'

function Count(props) {
  const countRef = useRef()

  function increment() {
    const value = Number(countRef.current.value) 
    props.increment(value)
  }
  function decrement() {
    const value = Number(countRef.current.value) 
    props.decrement(value)
  }
  function ifIncrement() {
    const value = Number(countRef.current.value) 
    if(props.count % 2 !== 0) {
      props.increment(value)
    }
  }
  function incrementAsync() {
    const value = Number(countRef.current.value) 
    props.incrementAsync(value, 500)
  }
  return (
    <div>
      <h1>我是Count</h1>
      <div>当前的和为：{props.count}</div>
      <br/>
      <select ref={countRef}>
      <option value="">请选择数字</option>
        <option value={1}>1</option>
        <option value={2}>2</option>
        <option value={3}>3</option>
      </select>&nbsp;&nbsp;
      <button onClick={increment}>+</button>&nbsp;&nbsp;
      <button onClick={decrement}>-</button>&nbsp;&nbsp;
      <button onClick={ifIncrement}>和为奇数+</button>&nbsp;&nbsp;
      <button onClick={incrementAsync}>异步+</button>
      <br/>
      <div>{props.person.map((item,index) => <h3 key={index}>{item.name}---{item.age}</h3>)}</div>

    </div>
  )
}

// 将容器组件整合到ui组件中 优化结构 
// container 为react-redux 的容器组件 作用链接 ui组件和 redux 通过 connect


// mapStateToProps 返回对象 state
const mapStateToProps = state => ({count: state.countReducer, person: state.personReducer})

// mapDispatchToProps 返回一个对象 传递方法
// const mapDispatchToProps = dispatch => ({
//   increment: data => dispatch(createIncrementAction(data)),
//   decrement: data => dispatch(createdecrementAction(data)),
//   incrementAsync: (data, delay) => dispatch(createIncrementActionAsync(data, delay))
// })
// mapDispatchToProps 的简写形式 API层面的优化 react-redux自动dispatch分发 
const mapDispatchToProps = {
  increment: createIncrementAction,
  decrement: createdecrementAction,
  incrementAsync: createIncrementActionAsync
}
// 创建并暴露 connect 
export default connect(mapStateToProps,mapDispatchToProps)(Count)

package.json

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",