当前位置：首页 > React

如何引用react redux

2026-01-23 23:50:58React

安装依赖

确保项目中已安装 react-redux 和 redux。通过 npm 或 yarn 安装：

npm install react-redux redux
# 或
yarn add react-redux redux

创建 Redux Store

在项目中创建 Redux store，通常放在 store.js 文件中：

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

提供 Store 给 React 应用

使用 Provider 将 store 提供给整个 React 应用，通常在入口文件（如 index.js）中完成：

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

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

连接组件到 Redux

使用 connect 函数将 React 组件连接到 Redux store。例如：

import React from 'react';
import { connect } from 'react-redux';

const MyComponent = ({ data, dispatch }) => {
  // 组件逻辑
};

const mapStateToProps = state => ({
  data: state.data
});

export default connect(mapStateToProps)(MyComponent);

使用 Hooks 替代 connect

React Redux 也提供 Hooks API，如 useSelector 和 useDispatch：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();

  // 组件逻辑
};

创建 Actions 和 Reducers

定义 actions 和 reducers 来管理状态变化。例如：

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

// reducers.js
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};

组合 Reducers

如果有多个 reducers，使用 combineReducers 合并：

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

const rootReducer = combineReducers({
  counter: counterReducer,
  user: userReducer
});

export default rootReducer;

异步操作

使用中间件如 redux-thunk 处理异步操作。先安装：

npm install redux-thunk
# 或
yarn add redux-thunk

然后在 store 中应用：

如何引用react redux

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));