Redux dev工具狀態圖顯示reducer正在更新另一個reducer

我已經實現了一個簡單的counter reducer，其中包含諸如「increment」，「decrement」等操作。我有'保存'行動，應該是保存陣列中的當前計數器值。Redux dev工具狀態圖顯示reducer正在更新另一個reducer

我還實現了另一個應該讀取一些數據並將其保存到數組的減速器。

當我將'save'動作發送給counter reducer時，Redux Dev工具狀態圖顯示fetch reducer也在更新。它不會改變fetch還原器的任何值，但圖表顯示出奇怪的行爲。

我可能會誤解我如何使用fetch還原器或兩者。

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

來源

2017-07-26 user1780729