React使用Redux管理数据

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

原创

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

0 ·

CC 4.0 BY-SA版权

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

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