React-redux(函数式组件)

接下来会以一个数字加减的案例对使用React-redux做一个使用说明

安装库

安装redux库，react-redux库，redux-thunk库

yarn add redux

yarn add react-redux

yarn add redux-thunk

Redux

定义：redux是一个专门用于做状态管理的JS库（不是react插件库）

核心是store和reducers 

store.js 创建store对象

我们推荐在src文件夹下建一个redux文件夹，用以存所有的redux状态

src/redux/store.js

// 该文件专门用于暴露一个store对象，整个应用只有一个store对象
// 引入createStore,专门用于创建redux中最为核心的store对象
import { createStore, applyMiddleware } from "redux";
// 引入redux-thunk,用于支持异步action
import thunk from "redux-thunk";
// 导入合并后的reducer
import allReducer from "./reducer";
// 暴露store
export default createStore(allReducer, applyMiddleware(thunk));

Reducer加工数据

我们推荐在redux文件夹下建立一个reducer文件夹，用于统一管理所有的reducer，并且合并回后导入到store文件里

src/redux/reducer/count.js

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;
  }
}

src/redux/reducer/index.js

合并所有reducer

import { combineReducers } from "redux";
// 引入为count组件服务的reducer
import count from "./count_reducer";

export default combineReducers({ count });

Action

创建action对象

src/redux/action/count.js

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

export const increment = (data) => ({ type: INCREMENT, data });
export const decrement = (data) => ({ type: DECREMENT, data });

export const incrementAction = (data, time) => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(increment(data));
    }, time);
  };
};

其他

统一管理常量

我们推荐在redux文件夹下建立一个constant的js文件，用于统一管理所有的store里的常量

例如：src/redux/constant.js

/* 该模块是用于定义action对象中type类型的常量值 */

export const INCREMENT = "increment";
export const DECREMENT = "decrement";

React-Redux

 

我们一般建议

components文件夹放的都是UI组件

containers文件夹下放的都是容器组件

容器组件操作。 containers/Count/index.jsx

        映射状态 mapstateToProps

        映射操作状态的方法 mapDispatchToProps

注意：我们注册路由表的时候，引入的是容器组件，不是UI组件

// 引入Count的UI组件
import CountUI from "../../components/Count";

//引入connect用于连接UI组件与redux
import { connect } from "react-redux";
import {
  increment,
  decrement,
  incrementAction,
} from "../../../../redux/action/count";

// function mapStateToProps(state) {
//   return { count: state };
// }

// function mapDispatchToProps(dispatch) {
//   return {
//     add: (number) => dispatch(increment(number)),
//     reduce: (number) => dispatch(decrement(number)),
//     addAsyc: (number, time) => dispatch(incrementAction(number, time)),
//   };
// }

// 使用connect()()创建并暴露一个Count的容器组件I
// export default connect(mapStateToProps, mapDispatchToProps)(CountUI);
export default connect((state) => ({ count: state.count }), {
  increment,
  decrement,
  incrementAction,
})(CountUI);

UI组件 components/Count/index.jsx 

import React, { Fragment, useRef } from "react";

export default function Count(props) {
  // 获取选择框ref实例
  const selectNum = useRef();

  //加
  const increment = () => {
    const {
      current: { value },
    } = selectNum;
    props.increment(value * 1);
  };
  //减
  const decrement = () => {
    const {
      current: { value },
    } = selectNum;
    props.decrement(value * 1);
  };
  //奇数加
  const incrementIfOdd = () => {
    const {
      current: { value },
    } = selectNum;
    if (props.count % 2 !== 0) {
      props.increment(value * 1);
    }
  };
  //异步加
  const incrementAsyc = () => {
    const {
      current: { value },
    } = selectNum;
    props.incrementAsyc(value * 1, 500);
  };

  return (
    <Fragment>
      <h1>当前求和为：{props.count}</h1>
      <select ref={selectNum}>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      &nbsp;
      <button onClick={increment}>+</button>&nbsp;
      <button onClick={decrement}>-</button>&nbsp;
      <button onClick={incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
      <button onClick={incrementAsyc}>异步加</button>
    </Fragment>
  );
}

全局传store

 provide 不需要额外单次的传store到组件里

全局传store，会根据需求，传store到需要的组件里

src/index.jsx

安装Redux DevTools

外网安装Redux DevTools

安装redux开发者工具搭配的库

yarn add redux-devtools-extension

store里引入redux-devtools-extension

拓展： 

redux库，react-redux库，redux-thunk库各自的作用？

Redux是一个用于管理JavaScript应用程序状态的库。它提供了一种可预测的状态管理方式，使得应用程序的状态变化更加可追踪和可预测。

React-Redux是Redux的官方React绑定库，它提供了一些React组件和API，用于在React应用程序中使用Redux。

Redux-Thunk是一个Redux中间件，它允许你在Redux的action creators中编写异步代码。Redux-Thunk中间件使得你可以使用dispatch()函数来分发异步action，这些action可以在异步操作完成后分发其他action。

Redux库的主要作用是：

1. 集中式状态管理：Redux将应用程序的状态集中管理，使得状态的变化更加可追踪和可预测。

2. 可预测的状态变化：Redux使用纯函数来处理状态的变化，这使得状态的变化更加可预测。

3. 可测试性：由于Redux的状态变化是可预测的，这使得Redux的状态管理更容易进行单元测试。

4. 时间旅行调试：Redux提供了一种时间旅行调试的方式，使得你可以查看和回溯应用程序的状态变化

React-Redux库的主要作用是： 

1. 连接React和Redux：React-Redux库提供了一些React组件和API，用于在React应用程序中使用Redux。

2. 提供连接组件：React-Redux库提供了一些高阶组件（Higher-Order Components），如<Provider>和<connect>，用于连接React组件和Redux store。

3. 简化状态访问：React-Redux库提供了一些API，如useSelector和useDispatch，用于简化在React组件中访问Redux store和分发action。

Redux-Thunk库的主要作用是：

 

1. 处理异步action：Redux-Thunk库允许你在Redux的action creators中编写异步代码，使得你可以处理异步操作，如API请求。

2. 简化异步逻辑：Redux-Thunk库使得你可以将异步逻辑与Redux的action creators分离，使得代码更加清晰和可维护。

3. 支持多个中间件：Redux-Thunk库是Redux中间件的一部分，可以与其他中间件一起使用，如Redux-Thunk和Redux-Saga，以处理更复杂的异步逻辑。 

react可以使用pinia库吗？ 

是的，React可以使用Pinia库。Pinia是一个用于Vue.js的状态管理库，但它也可以用于React。Pinia提供了与Vuex类似的功能，如状态管理、模块化、热重载等。

要在React中使用Pinia，你需要安装Pinia库，并在你的React应用程序中创建一个Pinia实例。然后，你可以使用Pinia提供的API来定义状态、getters、actions等。

以下是一个简单的示例：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

然后，你可以在你的React组件中使用Pinia来管理状态：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

总的来说，虽然Pinia最初是为Vue.js设计的，但它也可以用于React，为React应用程序提供强大的状态管理功能。