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

如果您使用的是combineReducers，则 all 切片削减器将运行每个调度动作。这是给定的减速器是否实际计算新状态的问题。

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

Answer 2

如果多个reduce实现相同的动作类型，那么一个动作确实可以结束更新多个reduce。在您的情况下，所有三个reducer都监听TEST_ACTION类型的动作。如果您不希望出现这种情况，则应确保操作类型在整个应用程序中都是唯一的，例如，通过为基于reducer的操作添加前缀。

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

叫一个动作触发多重减速器？

2 个答案: