Назовите действие триггером нескольких редукторов?

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' });
  }
}

Моя настройка редуктора: redurs / 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

Если вы используете combineReducers, все , ваши редукторы срезов будут работать для каждое отправленное действие. Вопрос в том, действительно ли данный редуктор вычисляет новое состояние или нет.

См. раздел часто задаваемых вопросов по Redux "есть ли преобразование 1: 1 между редукторами и действиями?" для получения более подробной информации. .

Answer 2

Действие может действительно завершить обновление нескольких редукторов, если несколько редукторов реализуют один и тот же тип действия. В вашем случае все три редуктора слушают действия типа TEST_ACTION. Если вам не нужно это поведение, вы должны убедиться, что типы действий уникальны во всем приложении, например, с помощью префикса действий на основе редуктора.

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