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

我已经实现了一个简单的计数器减缩器，其动作类似于“递增”、“递减”等等。我有一个“保存”操作，它应该保存数组中的当前计数器值

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

当我将“save”操作分派到计数器Redux Dev工具时，状态图显示fetch reducer也在更新。它并没有改变fetchreducer的任何值，但图表显示了奇怪的行为

我可能对如何使用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,
      }
    }

如何创建storenote为了简单起见，此逻辑都位于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
      )
    )

查看视频中的问题：

试一试：

---

当您分派任何动作时，所有减速机都会被调用，这是设计的。

那么这是正常行为吗？看我贴的视频，感觉不对？！是的，在任何调度操作中调用所有减速机都是正常行为。您的减速机似乎没有任何问题。