调用一个动作会触发多个减速器？

Question

我只在 LoginAction 中发送了一个动作，但它触发了三个减速器。我不知道为什么...

版本：

"react": "16.9.0",
"react-native": "0.61.2",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",

这是我的设置。

App.js:

import React from 'react';
import ReduxThunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { compose, createStore, applyMiddleware } from 'redux';
// import { persistStore } from 'redux-persist';
// import { PersistGate } from 'redux-persist/integration/react';
import reducers from './src/reducers';
import AppContainer from './src/navigator' // It is my react-navigation route

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const App: () => React$Node = () => {
  if (!__DEV__) {
    console.log = () => {};
  }

  const store = createStore(reducers, {}, composeEnhancers(applyMiddleware(ReduxThunk)));

  return (
    <Provider store={store}>
      <AppContainer />   
    </Provider>     
  );
};

export default App;

我的LoginAction.js:

export const testAction = () => {
  return (dispatch) => {
    dispatch( { type: 'TEST_ACTION' });
  }
}

我的减速器设置： reducers/index.js

import { combineReducers } from 'redux';
import LoginReducer from './LoginReducer';
import StoreReducer from './StoreReducer';
import ReservationReducer from './ReservationReducer';

export default combineReducers({
  LoginRedux: LoginReducer,
  StoreRedux: StoreReducer,
  ReservationRedux: ReservationReducer
});

我的LoginReducer.js：（StoreReducer和ReservationReducer与LoginReducer相同）

const INITIAL_STATE = {
  ...my state arguments
};

export default (state = INITIAL_STATE, action) => {

  // Here is my issue !
  // StoreReducer is 'StoreReducer reducer =>', action
  // ReservationReducer is 'ReservationReducer reducer =>', action
  console.log('Login reducer =>', action);  

  switch (action.type) {
    case 'SOME_ACTION': 
      return {
        // state setting from action
      };
    default:
      return state;
    }
};

调用动作组件是LoginScreen.js:

import React, { Component } from 'react';
import { 
  // some view
} from 'react-native';
import { connect } from 'react-redux';
import { login, closeLoadingCheckModal, testAction } from '../actions';

class LoginScreen extends Component {
  constructor(props) {
    super(props);

    this.state = { 
      // some states
    };
  }

  render() {
    return (
      <View>
        <TouchableOpacity onPress={() => { this.props.testAction() }>
          <Text>Press Test Action</Text>
        </TouchableOpacity>
      </View>
    );
  }
const mapStateToProps = (state) => {
  const { ...some store value  } = state.LoginRedux;

  return { ...some store value  };
};

}

export default connect(mapStateToProps, { login, closeLoadingCheckModal, testAction })(LoginScreen);

当我触发动作时，所有的减速器都会被触发。

它应该只控制台日志 Login reducer =>

有人知道我的问题是什么吗？

Answer 1

如果多个reducer 实现相同的action 类型，一个action 确实可以结束更新多个reducer。在你的例子中，所有三个 reducer 都监听 TEST_ACTION 类型的动作。如果您不想要这种行为，您应该确保操作类型在整个应用程序中是唯一的，例如通过基于 reducer 的操作前缀。

export const testAction = () => {
  return (dispatch) => {
    dispatch( { type: 'LOGIN_TEST_ACTION' });
  }
}

Answer 2

如果您正在使用 combineReducers，all 您的 slice reducer 将运行用于 every dispatched action .这是一个给定的减速器是否实际计算新状态的问题。

有关详细信息，请参阅 the Redux FAQ entry on "is there a 1:1 mapping between reducers and actions?"。

调用一个动作会触发多个减速器？

Calling an action triggers multiple reducers?

javascript

react-native

redux

redux-thunk

react-redux