当前位置：首页 > React

redux如何关联react

2026-01-23 23:55:10React

redux 关联 react 的核心方法

安装依赖包 确保项目中已安装 redux 和 react-redux，通过以下命令安装：

npm install redux react-redux

创建 Redux Store

在 Redux 中，Store 是状态管理的核心。通过 createStore 方法创建：

import { createStore } from 'redux';
import rootReducer from './reducers'; // 假设已定义 reducer

const store = createStore(rootReducer);

使用 Provider 包裹根组件

通过 react-redux 的 Provider 将 Store 注入 React 应用：

import { Provider } from 'react-redux';
import App from './App';

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

组件中连接 Redux

使用 connect 函数或 Hooks 将组件与 Redux 关联。

方法 1：connect 函数（类组件）

import { connect } from 'react-redux';

const mapStateToProps = (state) => ({ count: state.count });
const mapDispatchToProps = { increment };

class Counter extends React.Component {
  render() {
    return <button onClick={this.props.increment}>{this.props.count}</button>;
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

方法 2：Hooks（函数组件）

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

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return <button onClick={() => dispatch({ type: 'INCREMENT' })}>{count}</button>;
}

定义 Action 和 Reducer

确保 Redux 的 Action 和 Reducer 已正确定义：

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

// reducer.js
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
}

export default counterReducer;

合并多个 Reducer

使用 combineReducers 合并多个 reducer：

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

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

export default rootReducer;