Redux開発ツールの状態チャートは、減速機が別の減速機を更新していることを示しています

「増分」、「減分」などのアクションを持つ簡単なカウンタ減速機を実装しました。現在のカウンタ値を配列に保存するはずのアクションを保存しています。Redux開発ツールの状態チャートは、減速機が別の減速機を更新していることを示しています

私はロード時にいくつかのデータをフェッチして配列に保存する別のレデューサーも実装しました。

カウンタリデューサに「保存」アクションをディスパッチすると、Redux Devツールの状態チャートに、フェッチリデューサも更新中であることが示されます。フェッチレデューサーの値は変更されませんが、チャートは奇妙な動作を示します。

フェッチレデューサーまたはその両方をどのように使用しているのかが間違っていると思います。

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