Question

我试图使用this approach从api更新我的状态。所以我在reducer中创建了以下代码：

export default function(state = null, action){
    switch(action.type){
        case ROUTING_BOOKS:
            return action.payload.data;
        case UPDATE_BOOK:
            let newVals = state.map((item)=>{
                if(item.MatItemKey === action.meta.book.MatItemKey){
                    return update(item, {$merge: action.payload.data})

                }else{
                    return item
                }
            });
            console.log(newVals);
            return newVals
    }
    return state
}

newVals在我的状态中返回我想要的值。但是，使用此连接的组件使用connect：

function mapStateToProps(state){
    return{
        routing: state.activeRouting,
        routingBooks: state.routingBooks
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(RoutingTable);

ROUTING_BOOKS更新组件，但我对UPDATE_BOOK的调用似乎更新了reducer，但没有更新RoutingTable组件。

编辑：来自UPDATE_BOOK的样本数据

[{ “RoutingStepKey”：4752755， “MaterReqPer”：1， “MatItemKey”：216158 “MatReqPc”：1， “StepID”： “000010”， “OperationType”： “M”， “OperationDesc1”：”默认材料步骤“，”LongDesc“：”我是谁？“}，{”RoutingStepKey“：4752756，”MaterReqPer“：1，”MatItemKey“：216056，”MatReqPc“：1，”StepID“：”000020“， “OperationType”：“M”，“OperationDesc1”：“默认物质步骤”，“LongDesc”：“哺乳动物爱他们的婴儿”}，{“RoutingStepKey”：4752758，“MaterReqPer”：1，“MatItemKey”：218213，“ MatReqPc“：1，”StepID“：”000030“，”OperationType“：”M“，”OperationDesc1“：”默认物料步骤“，”LongDesc“：”我的森林“}]

来自Update_Book的示例数据：

[{ “RoutingStepKey”：4752755， “MaterReqPer”：1， “MatItemKey”：216158 “MatReqPc”：1， “StepID”： “000010”， “OperationType”： “M”， “OperationDesc1”：”默认材料步骤“，”LongDesc“：”我是谁？“...添加了更多数据}，{”RoutingStepKey“：4752756，”MaterReqPer“：1，”MatItemKey“：216056，”MatReqPc“：1，”StepID “：”000020“，”OperationType“：”M“，”OperationDesc1“：”默认物质步骤“，”LongDesc“：”哺乳动物爱他们的婴儿“...更多数据添加}，{”RoutingStepKey“：4752758，” MaterReqPer“：1，”MatItemKey“：218213，”MatReqPc“：1，”StepID“：”000030“，”OperationType“：”M“，”OperationDesc1“：”默认物料步骤“，”LongDesc“：”我的森林“......添加了更多数据}]

结合减速器：

import {combineReducers} from 'redux';
import books from './books';
import routings from './routings';
import activeBook from './activeBook';
import activeRouting from './activeRouting';
import options from './options';
import login from './login';
import uiState from './uiState';
import routingBooks from './routingBooks';

const rootReducer = combineReducers({
    books,
    routingBooks,
    activeBook,
    activeRouting,
    options,
    routings,
    login,
    uiState
});

export default rootReducer;

Answer 1

在答案部分发帖，因为评论部分不是显示代码示例的好地方。

也许沿着这些方向尝试一下？我不熟悉immutable.js库，但我假设你正在尝试将一个数组中的对象与一个更新的对象合并，当一本书的密钥与reducer中存在的一个键匹配时。

我还认为你的默认条件存在于switch语句之外，这可能会导致你出现问题。

export default function(state = [], action){
    switch(action.type){
        case ROUTING_BOOKS: {
            return action.payload.data;
        }
        case UPDATE_BOOK: {
            const newVals = state.map(item => {
                if(item.MatItemKey === action.meta.book.MatItemKey){
                    return { ...item, ...action.payload.data }
                }
                return item
            });
            return newVals
        }
        default:{
            return state
        }
    }
}

Answer 2

使用对象分配或其他方式创建不可变对象。（如immutable.js）

假设您的初始状态定义为：

state={ vals: '' }

return Object.assign({}, state, {
    vals: newVals
  })

或者您可以使用immutable.js作为示例

return Immutable.fromJS({
    vals: newVals
  });

在reducer中更新状态而不更新组件

2 个答案: