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

我在

react redux

中遇到了一个wierd问题，我获取的是所有状态，而不是我传递的状态 这是我的代码：

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

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

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

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

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

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

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

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

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

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

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

如您所见，我正在将

all

传递给

candle

和

live

传递给

livedata

但在我的Reduxdevtools中，我可以访问candle和livedata中的所有内容，如屏幕截图所示

这就是我如何在我的组件上分派操作的方式

App.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
               })
             }
          })
}

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

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

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

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

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

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

live

处于

livedata

状态，而

all

仅处于

candle

状态

---

谢谢

发生这种情况是因为您正在使用不同的名称访问同一个reducer。您应该为每个减速器创建单独的减速器

像这样：

candleeducer.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
               })
             }
          })
}

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

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

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

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

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

liveReducer.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
               })
             }
          })
}

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

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

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

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

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

然后将其导入联合收割机减速器：

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

---

您对状态的两个“部分”使用相同的减速器函数

在您的例子中，您在两个部分中复制相同的逻辑，因此调用相同的reducer，它对相同的操作作出反应，并使用相同的逻辑更新状态中的两个条目

你应该考虑写两个单独的蜡烛和LIFEDATA减速器，所以它们每一个都会对特定的动作作出反应，并在状态下修改正确的入口。< / P> 但是如果蜡烛和生物被释放到同一个区域，你应该考虑放进一个减速器，当然在一个状态段中，所以你最终会在这种情况下

const reducers = combineReducers({
  apiData:liveAndCandleReducer,
});

在apiData中，您将拥有

{
   all:[],
   live: [],
}

---

这完全取决于您和您的应用程序逻辑。

共享您的操作创建者和操作文件。很可能，您的常量具有相同的字符串值。@DenysKotsur我确实用ActionCreator的代码更新了我的问题您好感谢您花时间查看我的代码，我无法将它们放在同一个文件中并分离状态？当然可以按照@Coogle所说的做。如果你的逻辑没有问题，你可以把你的状态分开。谢谢你花时间回答这个问题，我想我会把它们放在同一个减速器里，用你的方法