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,
        });
      });
  },
};