Question

在我的store.js中，我有以下代码：

import { createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk'

const reducer = (state, action) => {
  console.log(action.type)
  if (action.type === 'LOAD_USERS') {
    return {
      ...state,
      users: action.users['users']
    }
  } else if (action.type === 'LOAD_CHATROOMS') {
    return {
      ...state,
      chatRooms: action.chatRooms['chatRooms']
    }
  }
  return state;
}

export default createStore(reducer, {users:[], chatRooms:[]}, applyMiddleware(thunk));

action.type === 'LOAD_CHATROOMS'中的代码由于某种原因永远不会被访问，这是我为减速器设置动作类型的动作文件：

import axios from 'axios'
axios.defaults.withCredentials = true

const loadUsers = () => {
  return dispatch => {
    return axios.get('http://localhost:3000/session/new.json')
    .then(response => {
      dispatch({
        type: 'LOAD_USERS', 
        users: response.data
      });
    });
  };
};

const logIn = user => {
  return axios.post('http://localhost:3000/session', {
    user_id: user.id
  })
  .then(response => {
    //TODO do something more relevant
    console.log('loged in');
  });

};

const loadChatRooms = () => {
  return dispatch => {
    return axios.get('http://localhost:3000/session/new.json')
    .then(response => {
      dispatch({
        type: 'LOAD_CHATROOMS', 
        chatRooms: response.data
      });
    });
  };
};

const enterChatRoom = chatrom => {

};

export { loadUsers, logIn, enterChatRoom, loadChatRooms};

'加载方法'获取用于填充两个组件的数据（一个用于用户列表，另一个用于聊天室列表），两个组件在app.js文件中的同一级别调用。

基本上我得到的输出是正确列表所预期的第一个组件（用户），并且还渲染了聊天室组件但是没有加载数据（因为它没有访问相应的reducer块）。 / p>

非常感谢阅读：）

react / redux app中的Reducer仅适用于一个action.type

0 个答案: