Redux

mini版

初始化仓库

• createStore被弃用了，所以替换成legacy_createStore

store.ts

// 引入createStore，专门用于创建redux最为核心的store对象
import { legacy_createStore } from "redux";
// 引入Count组件服务的reducer
import countReducer from "../store/count_Reducer";
// 暴露store
export default legacy_createStore(countReducer);

要更改数据的仓库

// 初始化状态
const initState = 0;

function countReducer(preState: any, action: any) {
  const { type, data } = action;

  switch (type) {
    case "increment":
      return preState + data;
    case "deincrement":
      return preState - data;
    case "incrementIfOdd":
      return preState + data;
    case "asyncIncrement":
      return preState + data;
    default:
      return initState;
  }
}

export default countReducer;

组件中

取值

• 在组件中获取仓库中的数据可以通过store.getState()
• 获取的值就是在仓库中return的值

更改值

• 仓库中的switch，组件通过 store.dispatch，传入type值即可与redux之间进行通信

import store from "../../store/store"; // 引入状态
store.dispatch({ type: "asyncIncrement", data: count });

完整版

• 在文件中需要定义count_action.tsx

import { INCREMENT, DECREMENT } from "./constant";
export const incrementCreate = (data: any) => ({ type: INCREMENT, data });
export const deincrementCreate = (data: any) => ({ type: DECREMENT, data });

这样定义为了防止后续变量名更改等constant.ts

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

• 定义好仓库，需要暴露出去store.ts

// 引入createStore，专门用于创建redux最为核心的store对象
import { legacy_createStore } from "redux";
// 引入Count组件服务的reducer
import countReducer from "../store/count_Reducer";
// 暴露store
export default legacy_createStore(countReducer);

• 需要的状态和操作count_Reducer.tsx

import { INCREMENT, DECREMENT } from "./constant";
// 初始化状态
const initState = 0;

function countReducer(preState: any, action: any) {
  const { type, data } = action;

  switch (type) {
    case INCREMENT:
      return preState + data;
    case DECREMENT:
      return preState - data;
    case "incrementIfOdd":
      return preState + data;
    case "asyncIncrement":
      return preState + data;
    default:
      return initState;
  }
}

export default countReducer;

store.ts

// 引入createStore，专门用于创建redux最为核心的store对象
import { legacy_createStore } from "redux";
// 引入Count组件服务的reducer
import countReducer from "../store/count_Reducer";
// 暴露store
export default legacy_createStore(countReducer);

要更改数据的仓库

import { INCREMENT, DECREMENT } from "./constant";
// 初始化状态
const initState = 0;

function countReducer(preState: any, action: any) {
  const { type, data } = action;

  switch (type) {
    case INCREMENT:
      return preState + data;
    case DECREMENT:
      return preState - data;
    case "incrementIfOdd":
      return preState + data;
    case "asyncIncrement":
      return preState + data;
    default:
      return initState;
  }
}

export default countReducer;

组件调用

  const increment = () => {
    store.dispatch(incrementCreate(count));
  };
  const deincrement = () => {
    store.dispatch(deincrementCreate(count));
  };

异步action写法

• 在组件中可以很容易的实现异步方法，但是如果在redux中实现异步处理，就需要另一种方式去处理

包的的支持

• 需要安装包

npm i -D redux-thunk

更改store.ts

之前写法

// 引入createStore，专门用于创建redux最为核心的store对象
import { legacy_createStore } from "redux";
// 引入Count组件服务的reducer
import countReducer from "../store/count_Reducer";
// 暴露store
export default legacy_createStore(countReducer);

现在写法

• 需要引入import thunk from "redux-thunk";
• 并在暴露出去的函数中引入

// 引入createStore，专门用于创建redux最为核心的store对象
import { applyMiddleware, legacy_createStore } from "redux";
// 引入Count组件服务的reducer
import countReducer from "../store/count_Reducer";
// 引入 redux-thunk 用于支持action
import thunk from "redux-thunk";
// 暴露store
export default legacy_createStore(countReducer, applyMiddleware(thunk));

异步函数的写法

• 异步action，就是指action的值为函数，异步action中一般会调用同步action，异步action不是必须要写的

import { INCREMENT, DECREMENT } from "./constant";
import store from "./store";
// 同步actio值为object的一般对象
export const incrementCreate = (data: any) => ({ type: INCREMENT, data });
export const deincrementCreate = (data: any) => ({ type: DECREMENT, data });

export const createUbcrementAsyncAction = (data: number, time: number) => {
  return () => {
    setTimeout(() => {
      store.dispatch(incrementCreate(data));
    }, time);
  };
};
// 需要安装 npm i -D redux-thunk