Redux开发人员工具状态图显示减速器正在更新另一个减速器

Question

I have implemented a simple counter reducer with actions like 'increment', 'decrement' and so on. I have 'save' action that is supposed to save current counter value in array.

I have also implemented another reducer that is supposed to fetch some data on load and save it to an array.

When I dispatch 'save' action to counter reducer Redux Dev tool state chart shows that fetch reducer is also updating. It is not changing any values of fetch reducer but chart shows strange behaviour.

I probably have a misstake into how I am using the fetch reducer or both.

App.js (container component)

    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)

Here are my reducers(they are in separate files)

    // 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

Actions:

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

How I create my store(note this logic is all situated in index.js for simplicity):

    // 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
      )
    )

See what's the problem in a video: https://youtu.be/oKOkU_VjZ7E

Try it out: https://github.com/kdichev/personal-portfolio/tree/feature/add-create-redux-react-app

Answer 1

当您分派任何动作时，即设计使然，所有reduce都会被调用。