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中，我可以通过屏幕截图看到蜡烛和liveata中的所有内容

这是我在我的组件上发送操作的方式

App.js

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

有人可以告诉我需要更改的内容，以便我只能访问

live状态下的

livedata和all状态下的candle

谢谢

Answer 1

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

像这样：

<强> candleReducer.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;
  }
}

<强> liveReducer.js

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

然后将它们导入到combine reducers中：

http://127.0.0.1

Answer 2

你正在为州的两个“部分”使用相同的减速器功能。

在您的情况下，您将在两个部分中复制相同的逻辑，因此调用相同的reducer并对相同的操作做出反应，并使用相同的逻辑更新状态中的两个条目。

您应该考虑为candle和livedata编写两个单独的reducer，因此每个reducer都会对特定操作做出反应并修改状态中的正确条目。

但是如果蜡烛和liveata被归为同一个域，你应该考虑放入一个减速器，当然还有一个部分状态，所以你最终会遇到这种情况

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

在apiData中你会有

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

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

Redux，获得所有州而不是我通过的州

2 个答案: