react-redux的使用及注意事项

React+Redux实践

最新推荐文章于 2025-02-10 11:00:52 发布

原创最新推荐文章于 2025-02-10 11:00:52 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #javascript

react 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何在React项目中集成React-Redux，实现全局状态管理。从安装依赖到配置store，再到将store注入到React组件中，一步步展示如何利用React-Redux简化数据共享，提升大型应用的开发效率。

使用react开发企业级应用在对数据进行共享时，原生的redux仓库管理方法比较繁琐。而react-redux是基于原生redux封装的一个插件库，使用起来比较简单，而且不用每次都订阅和取消订阅。下面就让我们来看看react-redux是如何使用的吧！
1.在一个react项目中安装 react-redux

yarn add react-redux  redux

2.新建一个 stroe 文件夹，创建管理员文件夹。

// 1. 定义管理员  src\store\reducer\index.js
const defaultState = {
    num: 0,
    userInfo: {
        name: '小明',
        age:17
    }
};

const reducer = (state = defaultState, action) => {
    return state;
};

export default reducer;

3.在 store 文件夹下，创建仓库文件

// 仓库 src\store\index.js

// 导入管理员
import reducer from './reducer/index.js';

import { createStore } from 'redux';

// 创建仓库并丢进去一个管理员
const store = createStore(reducer);

export default store;

4.在整个项目的入口文件src/index.js 导入仓库 store

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { Provider } from 'react-redux';

import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);