Question

我已经实现了一个简单的反减速器，其行为包括'增量'，'减量'等。我有'保存'动作，应该将当前计数器值保存在数组中。

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

当我向反减速器发送'save'动作时，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

当您发送任何操作时，都会调用所有reducers，即设计。

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

1 个答案: