在react项目中使用redux

对于数据交互比较复杂的项目， 我们会考虑使用一个公共 状态/数据 文件，来保存这些用来做复杂交互或者多个页面反复用到的数据，在react项目中， 此时你可能就会考虑到redux或者mobx。那么今天首先来讲讲如何在react项目中使用redux。
对于mobx， 咱来日方长， 日后再说！！

那么。接下来，来小敲一波， 以 create-react-app 脚手架为例

第一步 安装依赖

yarn add react-redux
yarn add redux
yarn add redux-thunk

第二步 修改index.js 入口文件， 引入redux

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Provider } from 'react-redux';
import {
    createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import reducer from './reducer/index';

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

serviceWorker.unregister();

第三步 在入口文件同级目录下创建reducer文件夹并添加index.js文件

const getLocalStorage = () => {
   
    const pageStr = window.localStorage.getItem('pageData');
    if (!pageStr) {
   
      return null;
    }
    try {
   
      const pageData = JSON.parse(pageStr);
      return pageData;
    } catch (e) {
   
      return null;
    }
  }

const initialState = () => (
    getLocalStorage() ||
    {
   
      count: 1,
    }
  );
  
  export default function activity(state = initialState(), action) {
   
    let newState = {
   };
    switch (action.type) {
   
      case 'addCount':
        newState = {
   
          ...state,
          ...action.payload,
        };
        break;
      case 'reducerOne':
        newState = {
   
          ...state,
          ...action.payload,
        };
        break;
      default:
        newState