Редукторы не подключены - PullRequest
Новая
       12

Редукторы не подключены

1 голос
/ 04 августа 2020

Я пытаюсь использовать combReducers для объединения нескольких редукторов. Когда я просто использую каждый редуктор в redurs / index. js, тогда он работает, однако, как только я пытался объединить их с combReducers, он вообще не работал.

/ reducers / index. js

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

export default combineReducers({
  userAuth,
  organize
});

/ redurs / web ... / user / userAuth 

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

/ redurs / organization 

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

/ store / index. js

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
export const store = createStore(
  rootReducer,
  compose(applyMiddleware(sagaMiddleware))
);
sagaMiddleware.run(rootSaga);

Я пробовал использовать const rootReducer = combReducer () ..... Однако он тоже не работал. На моей странице входа моя сага работает, поэтому я не думаю, что это с ошибкой {connect} react-redux. Я также попытался дать им разные имена в combReducers, например, user: userAuth, вот так.

Когда я пытаюсь получить доступ к «токену», я получаю значение undefined. У меня нет никаких подсказок, почему он не работает, поскольку он отлично работает, когда я заменяю /reducers/index.js на коды редуктора userAuth!

1 Ответ

1 голос
/ 04 августа 2020

когда я пытаюсь получить доступ к 'токену', я получаю значение undefined

Доступ к нему, где и доступ к нему, как?

Не похоже, что есть что-то не так с вашим кодом, вот рабочий пример: 

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>
...