第三章： 全局?jǐn)?shù)據(jù)狀態(tài)管理 Redux

Redux 是啥总寒？

可以理解為全局?jǐn)?shù)據(jù)狀態(tài)管理工具萤晴，用來做組件通信等。
好的廢話不多說她奥，直接上手怔蚌。

引入redux 與 react-redux

npm install redux react-redux --save
//o r
yarn add redux react-redux

隨后創(chuàng)建store.ts，簡單封裝個項(xiàng)目可用的store

/src/tools/store/store.ts

store.ts源碼如下

import { combineReducers, createStore } from "redux";

export const USER_STATE = 'USER_STATE'; // 用戶信息標(biāo)識
export const MENU_STATE = 'MENU_STATE'; // 菜單信息標(biāo)識

const initState = {
    user: {},// 用戶信息
    menuList: [], // 菜單信息
    recentMenu: [] // 最近使用的菜單
};

const todos = (state = initState, action: any) => {
    switch (action.type) {
        // 用戶信息變化
        case USER_STATE:
            return { ...state, user: action.user };
        case MENU_STATE:
            return { ...state, menuList: action.menuList };
        default:
            return state
    }
}

const reducers = combineReducers({
    globalInfo:todos
})

const createMyStore = () => {
    const store = createStore(reducers)
    return store;
}

const store = createMyStore()

export default store;

封裝好后功咒，在根目錄的index.tsx中調(diào)用愉阎，代碼如下：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import "./style/index.less";
import Login from "./pages/login";
import { Provider } from "react-redux";
import store from "./tools/store/store";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <Login />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

好了绞蹦，封裝好后，我們回到上一章的Login（登錄頁中）榜旦，更新下信息幽七，后續(xù)的組件需要用戶信息 直接可以獲取。

通過useDispatch方法獲取dispatch章办，進(jìn)行用戶信息更新锉走。

import { Form, Input, Button, Checkbox, Card } from "antd";
import cookie from "react-cookies";
import { useDispatch } from "react-redux";
import store, { USER_STATE } from "../../tools/store/store";

const Login = () => {
  const dispatch = useDispatch();
  const changeUser = (values: any) => {
    return { type: USER_STATE, user: { ...values } };
  };
  const onFinish = (values: any) => {
    console.log("Success:", values);
    console.log("cookie:", cookie.load("token"));
    console.log("store:", store.getState()); // 獲取state
    // 登錄成功
    setTimeout(() => {
      const oneDay = new Date(new Date().getTime() + 24 * 3600 * 1000); // 設(shè)置失效日期一天
      cookie.save("token", "ffffffffff", { expires: oneDay });
      //登錄更新用戶
      dispatch(changeUser(values));
    }, 1000);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <Card style={{ top: 50, width: "50%", marginLeft: "25%" }}>
      <Form
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="賬號"
          name="username"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密碼"
          name="password"
          rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="remember"
          valuePropName="checked"
          wrapperCol={{ offset: 8, span: 16 }}
        >
          <Checkbox>記住賬號</Checkbox>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            登錄
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default Login;

到此登錄頁與狀態(tài)管理完成。