欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React配置Redux并結合本地存儲設置token方式

 更新時間：2024年01月25日 09:38:47   作者：sonicwater  
這篇文章主要介紹了React配置Redux并結合本地存儲設置token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

此 React 項目使用 TypeScript 和 Hooks API，本文介紹配置 Redux 并結合本地存儲設置 token

安裝依賴

yarn add redux -S
yarn add react-redux -S
  • redux 可以脫離 react 使用， react-redux 的作用主要是提供 <Provider> 標簽包裹頁面組件。

store 目錄，以加減運算為例

src
 ├── store
 │     ├── actions
 │     │    └── counter.ts
 │     ├── reducers
 │     │    ├── counter.ts
 │     │    └── index.ts
 │     └── index.ts

./src/store/index.ts

import { createStore } from 'redux';
import allReducers from './reducers';
// 注冊
const store = createStore(
  allReducers,
  // @ts-ignore
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // 引入Redux調試工具
);
// 導出
export default store;

./src/store/actions/counter.ts

export interface action {
  type: 'INCREMENT' | 'DECREMENT';
  num?: number;
}
export const increment = (num: number = 1): action => ({
  type: 'INCREMENT',
  num
});
export const decrement = (num: number = 1): action => ({
  type: 'DECREMENT',
  num
});

./src/store/reducers/index.ts

import { combineReducers } from "redux";
import counter from "./counter";
// 整合
const allReducers = combineReducers({ counter });
export default allReducers;

./src/store/reducers/counter.ts

interface action {
  type: "INCREMENT" | "DECREMENT";
  num?: number;
}
const counter = (state = 0, action: action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + (action.num as number);
    case "DECREMENT":
      return state - (action.num as number);
    default:
      return state;
  }
};
export default counter;

再看 ./src/app.tsx

import { FC } from 'react';
import { Provider } from 'react-redux';
import store from 'src/store';
...
const App: FC = () => {
  return (
    <Provider store={store}>
      ...
    </Provider>
  );
}
  • 只列出和 react-redux、store 有關的代碼。
  • <Provider> 放在最外層，里面放路由組件。

用一個組件頁面 CounterComponent 測試 store 中的 counter 模塊。

import { FC } from 'react';
import { Button } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from "src/store/actions/counter";

const CounterComponent: FC = () => {
  const dispatch = useDispatch();
  const num = useSelector(state => (state as any).counter);
  return(
  	<>
  	  <div className="text-blue-500">
        { num }
      </div>
      <Button type="default" onClick={() => dispatch(decrement())}>-1</Button>
      <Button type="primary" onClick={() => dispatch(increment())}>+1</Button>
  	</>
  )
}

export default CounterComponent;
  • 注意 react-redux 提供的 useDispatch、useSelector 兩個 Hooks 的使用。
...
return(
  <>
	<div className="text-blue-500">
	  { num }
	</div>
	<Button type="default" onClick={() => dispatch({
	  type: 'DECREMENT',
	  num: 1
	})}>-1</Button>
	<Button type="primary" onClick={() => dispatch({
	  type: 'INCREMENT',
	  num: 1
	})}>+1</Button>
  </>
)
...
  • dispatch 也可以像上面這樣寫，如此可以省略 src/store/actions/counter 相關方法的引入。
const num = useSelector(state => (state as any).counter);
  • useSelector 可以訪問并返回全部 store 中的子模塊，這里只返回 counter 子模塊。

可以參照上面例子寫一個保存登錄 login_token 的子模塊，并結合 localStorage 根據(jù)登錄狀態(tài)控制頁面跳轉。

至于已經(jīng)有 redux 為什么還要結合 localStorage ，這樣的疑問，有兩點原因：

  • redux 在頁面刷新后值會被初始化，無法實現(xiàn)數(shù)據(jù)持久化。但是 redux 的數(shù)據(jù)可以影響子路由頁面響應式變化。
  • localStorage 保存的數(shù)據(jù)不會被刷新等操作影響，可以持久化。但是 localStorage 不具備 redux 的響應式變化功能。

在 redux 中創(chuàng)建用戶模塊 user 里面保存 login_token。

注意: 這里的 login_token 是調登錄接口返回的經(jīng)過加密的 32 位字符串，不是 JWT 標準格式的 token

修改一下目錄，增加 user 相關文件。

src
 ├── store
 │     ├── actions
 │     │    ├── counter.ts
 │     │    └── user.ts
 │     ├── reducers
 │     │    ├── counter.ts
 │     │    ├── index.ts
 │     │    └── user.ts
 │     └── index.ts

./src/store/actions/user 

export interface action {
  type: "SET_TOKEN" | "DELETE_TOKEN";
  login_token?: string;
}
export const setToken = (login_token: string): action => ({
  type: "SET_TOKEN",
  login_token
});
export const deleteToken = (): action => ({
  type: "DELETE_TOKEN"
});

./src/store/reducers/user 

interface action {
  type: "SET_TOKEN" | "DELETE_TOKEN";
  token?: string;
}
const user = ( state='', action: action ) => {
  switch (action.type) {
    case "SET_TOKEN":
      state = action.token as string;
      localStorage.setItem('login_token', state);
      break
    case "DELETE_TOKEN":
      localStorage.removeItem('login_token');
      state = '';
      break
    default:
      state = localStorage.getItem('login_token') || '';
      break
  }
  return state;
};
export default user;
  • 所有對 login_token 的設置、獲取、刪除都先對本地存儲進行響應操作，然后返回值。

修改 ./src/store/reducers/index.ts

import { combineReducers } from "redux";
import counter from "./counter";
import user from "./user";
// 整合
const allReducers = combineReducers({ counter, user });
export default allReducers;

頁面相關操作

登錄：

import { useDispatch } from 'react-redux';
import { setToken } from "src/store/actions/user";
import { useHistory } from 'react-router-dom';

interface LoginEntity {
  username: string;
  password: string;
}

const Login = () => {
  const dispatch = useDispatch();
  const history = useHistory();
  ...
  // 登陸按鈕邏輯
  const handleLogin = async (login:LoginEntity) => {
    // 調用登陸Api，獲取結果
    let res = await doLogin({...login});
	dispatch(setToken(res.data.login_token));
	// 跳轉到 home 頁面
	history.push('/home');
  }
  ...
}
  • 在驗證登錄信息后，調用登錄接口，接口返回 login_token
  • dispatch(setToken(res.data.login_token)) 方法存儲到 redux 中并頁面跳轉。

登出的邏輯：

  ...
    dispatch(deleteToken());
    history.push('/login');
  ...

useDispatch 屬于 Hooks API ，它只能被用在函數(shù)式組件中。

如果要在一些配置文件如 API 接口的配置文件中使用，需要換一種寫法。

...
import store from "src/store";
// axios實例攔截請求
axios.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    ...
    Object.assign(config['post'], {
      login_token: store.getState().user
    });
    ...
    return config;
  },
  (error:any) => {
    return Promise.reject(error);
  }
)
...
  • 在調接口前攔截請求，在請求參數(shù)中添加 login_token
  • 注意寫法：store.getState() 后面接的是模塊名

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論