创建redux仓库 ts版

最新推荐文章于 2024-08-25 16:11:14 发布

Zeng_Z_H

最新推荐文章于 2024-08-25 16:11:14 发布

阅读量326

点赞数

文章标签： javascript 前端 typescript

本文链接：https://blog.youkuaiyun.com/Zeng_Z_H/article/details/123090129

版权

本文档介绍了如何在项目中创建Redux商店，包括在src/store目录下新建action、reducer文件，然后在index.ts中整合reducer并创建store，最后通过Provider组件将React与Redux连接起来。

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

在scr下创建store：
1. 新建store/action/user.ts
2. 新建store/reducer/user.ts
3. 新建store/reducer/index.ts ：合并reducer
4. store/index.ts 创建store：连接调试工具
5. Provider连接React和Redux

src/store/reducer/user.ts

const initialState = {
  name: '123',  //示例
};

// 2.创建reducer，💥 不解构action
export default function userReducer(state = initialState, action: any) {
  switch (action.type) {
    default:
      return state;
  }
}

src/store/reducer/index.ts

import { combineReducers } from 'redux';
import userReducer from './user';

// 3. 合并reducer
const rootReducer = combineReducers({
  user: userReducer,
});

export default rootReducer;

src/store/index.ts

import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducer';

// 4.  创建store：设置中间件和调试工具
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));
export default store;

src/index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import App from './App'
import store from '@/store'

// 5. 连接React
ReactDOM.render(<Provider store={store}>
  <App />
</Provider>, document.getElementById('root'))