Question

我正在尝试使用CombineReducers组合多个reducer。当我只在reducers / index.js中使用每个reducer时，它就起作用了，但是，一旦我尝试将它们与CombineReducers结合起来，它就根本不起作用。

/reducers/index.js

items

/ reducers / web ... / user / userAuth

import { combineReducers } from 'redux';
import userAuth from './webServiceReducers/user/userAuth';
import organize from './organize';

export default combineReducers({
  userAuth,
  organize
});

/ reducers / organize

import * as actions from '../../../actions/actionTypes';

const initialState = {
  token: 'asdfeasdfsadf',
  auth: 'false',
};

export default function (state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    //login
    case actions.USER_LOGIN_SUCCESS:
      return {
        ...state,
        auth: true,
        token: payload.token,
      };
  default:
      return state;
  }
}

/store/index.js

import * as actions from '../../../actions/actionTypes';

const initialState = {
  organize: 'organize'
};

export default function (state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    //login
    case actions.ORGANIZE:
      return {

      };
  default:
      return state;
  }
}

我尝试使用const rootReducer = CombineReducer（）...但是，它不能很好地工作。在我的登录页面中，我的传奇作品有效，因此，我认为这与{connect} react-redux错误无关。我还尝试在CombineReducers中给它们提供不同的名称，例如“ user：userAuth”。

当我尝试访问“令牌”时，得到的值是不确定的。我零提示为什么它不起作用，因为当我将/reducers/index.js替换为userAuth reducer代码时，它可以正常工作！

Answer 1

当我尝试访问“令牌”时，得到的值未定义

在哪里访问它，如何访问它？

您的代码看起来没有任何问题，这是一个有效的示例：

const { Provider, useDispatch, useSelector } = ReactRedux;
const {
  createStore,
  applyMiddleware,
  compose,
  combineReducers,
} = Redux;

//action types
const AUTH = 'AUTH';
const ORGANIZE = 'ORGANIZE';
//action creators
const auth = () => ({ type: AUTH });
const organize = () => ({ type: ORGANIZE });
const authReducer = (state = 0, { type }) => {
  if (type === AUTH) {
    return state + 1;
  }
  return state;
};
const organizeReducer = (state = 0, { type }) => {
  if (type === ORGANIZE) {
    return state + 1;
  }
  return state;
};
const reducer = combineReducers({
  auth: authReducer,
  organize: organizeReducer,
});
//selectors
const selectAuth = (state) => state.auth;
const selectOrganize = (state) => state.organize;
//creating store with redux dev tools
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducer,
  composeEnhancers(
    applyMiddleware(() => (next) => (action) =>
      next(action)
    )
  )
);
const App = () => {
  const authValue = useSelector(selectAuth);
  const organizeValue = useSelector(selectOrganize);
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(auth())}>
        auth:{authValue}
      </button>
      <button onClick={() => dispatch(organize())}>
        organize:{organizeValue}
      </button>
    </div>
  );
};

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>

减速器未连接

1 个答案: