Redux dev 工具状态图显示 reducer 正在更新另一个 reducer

Question

我已经实现了一个简单的计数器减速器，其中包含 'increment'、'decrement' 等操作。我有 'save' 操作，应该将当前计数器值保存在数组中。

我还实现了另一个减速器，它应该在加载时获取一些数据并将其保存到数组中。

当我派遣 'save' 动作来对抗 reducer Redux Dev 工具状态图显示 fetch reducer 也在更新。它没有改变 fetch reducer 的任何值，但图表显示奇怪的行为。

我可能对我使用 fetch reducer 或两者的方式有误。

App.js（容器组件）

    import React, { Component } from 'react';
    import { connect } from 'react-redux'
    import logo from './logo.svg';
    import './App.css';
    import Counter from './components/Counter'
    import Data from './components/Data'
    import {
      increaseAction,
      decreaseAction,
      resetAction,
      saveAction,
      removeAction,
      fetchData
    } from './actions'

    class App extends Component {
      componentDidMount() {
        // the only thing i dispatch to fetch reducer
        const response = [1,2,3,4,5,6,7,8]
        this.props.fetchData(response);
      }
      render() {
        return (
          <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>Welcome to React</h2>
            </div>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
            <Counter
              onIncreaseClick={this.props.onIncreaseClick}
              onDecreaseClick={this.props.onDecreaseClick}
              onResetClick={this.props.onResetClick}
              onSaveClick={this.props.onSaveClick}
              onRemoveClick={this.props.onRemoveClick}
              value={this.props.counterValue}
              savedCounter={this.props.savedCounter}
            />
            <Data data={this.props.fetch}/>
          </div>
        );
      }
    }

  // Map Redux state to component props
  function mapStateToProps(state)  {
    let counter = state.counter
    let fetch = state.fetch
    return {
      counterValue: counter.count,
      savedCounter: counter.saved,
      fetch: fetch.data
    };
  }

  // Map Redux actions to component props
  function mapDispatchToProps(dispatch) {
    return {
      onIncreaseClick: () => dispatch(increaseAction),
      onDecreaseClick: () => dispatch(decreaseAction),
      onResetClick: () => dispatch(resetAction),
      onSaveClick: () => dispatch(saveAction),
      onRemoveClick: () => dispatch(removeAction),
      fetchData: (data) => dispatch(fetchData(data))
    };
  }

  export default connect(mapStateToProps, mapDispatchToProps)(App)

这是我的减速器（它们在单独的文件中）

    // Reducer:
    function counter(state={count: 0, saved: []}, action) {
      let count = state.count;
      let saved = state.saved;
      switch(action.type){
        case 'increase':
          return {
            ...state,
            count: count  + 1
          };
        case 'decrease':
          if (count === 0) {
            return {...state, count: count }
          }
          return {
            ...state,
            count: count - 1
          };
        case 'reset':
          return {
            ...state,
            count: count  = 0
          };
        case 'save':
          return {
            ...state,
            saved: [...saved, count]
          };
        case 'remove':
          return {
            ...state,
            saved: [...saved.slice(0, -1)]
          };
        default:
          return state;
      }
    }

    export default counter

    // Reducer:
    function fetch(state={data: []}, action) {
      console.log("When I call 'save' this is also invoked");
      switch(action.type){
        case 'fetch':
        return {...state, data: [...action.payload] }
        default:
          return state;
      }
    }

    export default fetch

操作：

    export const increaseAction = {type: 'increase'};
    export const decreaseAction = {type: 'decrease'};
    export const resetAction = {type: 'reset'};
    export const saveAction = {type: 'save'};
    export const removeAction = {type: 'remove'};
    export const FETCH_DATA = 'fetch';

    export function fetchData(payload) {
      return {
        type: FETCH_DATA,
        payload: payload,
      }
    }

我如何创建我的商店（请注意，为简单起见，此逻辑全部位于 index.js 中）：

    // Combine all application reducers
    const appStore = combineReducers({
      counter,
      fetch
    })


    // Store configuration
    const loggerMiddleware = createLogger()
    let store = createStore(
      appStore,
      // only for dev
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
      applyMiddleware(
        loggerMiddleware
      )
    )

在视频中查看问题所在： https://youtu.be/oKOkU_VjZ7E

试一试： https://github.com/kdichev/personal-portfolio/tree/feature/add-create-redux-react-app

Answer 1

当您分派任何操作时，所有 reducer 都会被调用，这是设计使然。

Redux dev 工具状态图显示 reducer 正在更新另一个 reducer

Redux dev tool state chart shows that reducer is updating another reducer

javascript

reactjs

redux

react-redux