javascript - Redux，获取所有状态而不是我通过的状态

Question

我在 react-redux 中遇到了一个奇怪的问题，我得到的是所有状态而不是我通过的状态这是我的代码:

Action.js

import socketIOClient from 'socket.io-client'

const DATA_URL = "LINK TO API";
export const GET_DATA ='GET_DATA';
export const LIVE_DATA = 'LIVE_DATA';
const parseData= arr => arr.reverse().map((i)=>([i[0],i[1],i[3],i[4],i[2],i[5]]))

export const getData = () => dispatch =>{
   fetch(DATA_URL).then(res => res.json())
                  .then(data => dispatch({
                    type:GET_DATA,
                    payload:parseData(data)
                  }
))
}
export const getLive = () => dispatch => {
  var checkTime=0;
 const socket = socketIOClient('http://localhost:3001');
       socket.on("candle",(res)=>{
            if(checkTime <= res[0]){
               checkTime = res[0];
               dispatch({
                 type:LIVE_DATA,
                 payload:res
               })
             }
          })
}

api.js

import {GET_DATA,LIVE_DATA} from '../actions/index';
const INITIAL_STATE = {all:[],live:[]}

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_DATA:
      return Object.assign({},state,{all:action.payload})
    case LIVE_DATA:
    return Object.assign({},state,{live:action.payload})
    default:
     return state;
  }
}

reducer.js

import { combineReducers } from 'redux';
import all from './api';
import live from './api';
const reducers = combineReducers({
candle:all,
livedata:live
});
export default reducers;

正如你所看到的，我将all传递给candle，将live传递给livedata

但在我的 Reduxdevtools 中，我可以访问蜡烛和实时数据中的所有内容，如屏幕截图所示

这就是我在组件上调度操作的方式

App.js

const mapStateToProps = state => ({
  data: state.candle.all,
  live: state.livedata.live
})

有人可以告诉我需要更改什么以便我只能访问

live 处于 livedata 状态，all 仅处于 candle 状态

谢谢

Answer 1

发生这种情况是因为您正在访问相同的 reducer ，但名称不同。您应该为每个创建单独的 reducer 。

像这样:

candleReducer.js

import {GET_DATA} from '../actions';

const INITIAL_STATE = { all:[] }

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_DATA:
      return Object.assign({},state,{all:action.payload})
    default:
     return state;
  }
}

liveReducer.js

import {LIVE_DATA} from '../actions';

const INITIAL_STATE = { live:[] }

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case LIVE_DATA:
     return Object.assign({},state,{ live:action.payload })
    default:
     return state;
  }
}

然后将它们导入到组合 reducer 中:

import { combineReducers } from 'redux';
import all from './candleReducer';
import live from './liveReducer';
const reducers = combineReducers({
    candle:all,
    livedata:live
});
export default reducers;