脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React配置Redux并结合本地存储设置token

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 根据登录状态控制页面跳转。

至于已经有 redux 为什么还要结合 localStorage ，这样的疑问，有两点原因：

  • redux 在页面刷新后值会被初始化，无法实现数据持久化。但是 redux 的数据可以影响子路由页面响应式变化。
  • localStorage 保存的数据不会被刷新等操作影响，可以持久化。但是 localStorage 不具备 redux 的响应式变化功能。

在 redux 中创建用户模块 user 里面保存 login_token。

注意: 这里的 login_token 是调登录接口返回的经过加密的 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 ，它只能被用在函数式组件中。

如果要在一些配置文件如 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);
  }
)
...
  • 在调接口前拦截请求，在请求参数中添加 login_token
  • 注意写法：store.getState() 后面接的是模块名

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • React18新增特性released的使用

    React18新增特性released的使用

    本文主要介绍了React18新增特性released的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • jsoneditor二次封装实时预览json编辑器组件react版

    jsoneditor二次封装实时预览json编辑器组件react版

    这篇文章主要为大家介绍了jsoneditor二次封装实时预览json编辑器组件react版示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • react中context传值和生命周期详解

    react中context传值和生命周期详解

    这篇文章主要介绍了react中context传值和生命周期,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-03-03
  • 浅谈react路由传参的几种方式

    浅谈react路由传参的几种方式

    这篇文章主要介绍了浅谈react路由传参的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • React条件渲染实例讲解使用

    React条件渲染实例讲解使用

    在React中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和JavaScript中的一致，使用JavaScript操作符if或条件运算符来创建表示当前状态的元素，然后让React根据它们来更新UI
    2022-11-11
  • React Native之TextInput组件解析示例

    React Native之TextInput组件解析示例

    本篇文章主要介绍了React Native之TextInput组件解析示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React父子组件互相通信的实现示例

    React父子组件互相通信的实现示例

    React中是单向数据流,数据只能从父组件通过属性的方式传给其子组件,本文主要介绍了React父子组件互相通信的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • React配置代理方式(proxy)

    React配置代理方式(proxy)

    这篇文章主要介绍了React配置代理方式(proxy),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • React中setState同步异步场景的使用

    React中setState同步异步场景的使用

    本文主要介绍了React中setState同步异步场景的使用，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 详解如何使用React Hooks请求数据并渲染

    详解如何使用React Hooks请求数据并渲染

    这篇文章主要介绍了如何使用React Hooks请求数据并渲染，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10

最新评论