React使用Redux管理数据

最新推荐文章于 2024-06-11 09:51:56 发布

marsur

最新推荐文章于 2024-06-11 09:51:56 发布

阅读量184

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/marsur/article/details/103619624

版权

本文介绍了如何在React应用中运用Redux进行状态管理。详细阐述了Redux的文件目录结构，包括state.js、index.js、actions.js和reducers.js的职责。在LoginPage组件中，通过触发actions并结合reducers更新state，实现组件状态的改变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.文件目录

2.state.js

export default {
	areaIndex: 0,
	token: {
		accessToken: '',
		idToken: '',
		refreshToken: ''
	}
}

3.index.js

Redux 提供createStore这个函数，用来生成 Store。

createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。

import { applyMiddleware, createStore } from 'redux'

// 中间件，用于异步action
import thunk from 'redux-thunk'

// 引入reducer
import reducers from './reducers.js'

// 创建store实例
let store = createStore(
  reducers,
  applyMiddleware(thunk)
)

export default store