Redux 基本使用与进阶优化

一、 Redux 基本使用

1. 创建项目

安装必要工具：

npm install -g create-react-app

创建项目：

create-react-app react-redux-ant

2. 安装 Redux

通过Yarn安装：

yarn add redux --save

3. 创建 Redux 存储

在 src 目录下创建 store 和 reducers 目录：

store/index.js：

import { createStore } from 'redux';import reducer from './reducers/reducer';const store = createStore(reducer);export default store;

reducers/reducer.js：

const defaultState = {  number: 0,  userInfo: { name: 'wxq' }};export default (state = defaultState, action) => {  return state;};

4. 使用 Redux 数据

在组件中使用：

const { number } = props.store.getState();

5. 修改 Redux 状态

通过 dispatch 方法：

props.store.dispatch({  type: 'ADD',  data: 1});

6. 状态更新处理

在组件中:

const add = () => {  props.store.dispatch({    type: 'ADD',    data: 1  });};

二、 Redux 进阶优化

1. 模块化 reducers

创建 reducers.js：

import { combineReducers } from 'redux';import counter from './counter/index';const reducers = combineReducers({  counter});export default reducers;

2. 使用 React-Redux

安装 React-Redux：

yarn add react-redux

3. Provider 组件

在主组件外使用 Provider：

import React from 'react';import ReactDOM from 'react-dom';import App from './App';import store from './store';import { Provider } from 'react-redux';ReactDOM.render(  
       
      
   ,  document.getElementById('root'));

4. 容器组件

在组件外部使用 connect：

import React from 'react';import { connect } from 'react-redux';const Index = ({ number, add }) => {  return (    
         
    count组件
      
    count: {number}
      
          
        
   
  );};export default connect((state) => ({ number: state.number })) (Index);

三、 Redux 数据交互

1. 异步操作处理

安装 Redux Thunk：

yarn add redux-thunk

创建 store：

import { createStore, applyMiddleware } from 'redux';import reducer from '../reducers/reducers';import thunk from 'redux-thunk';const store = createStore(reducer, applyMiddleware(thunk));export default store;

在 actionCreators.js 中添加异步逻辑：

export const actionCreators = {  add: () => ({    type: 'ADD',  }),  getInfo: () => dispatch => {    fetch('/data.json')      .then(res => res.json())      .then(data => {        dispatch({          type: 'GET_INFO',          payload: data,        });      });  },};