Question

我的REACT-REDUX有问题。我只喜欢这份指南：https://redux.js.org/recipes/usage-with-typescript。

当我从视图中调用Thunk Action来确认我只是检查REDUX开发工具以检查当前状态时，Redux才更新其状态。问题是我从Redux中获得了一个道具，并且想要渲染ToDos数组中的所有元素，REDUX devtools向我展示了该数组中有2-3个元素，但视图中的道具为空。有任何建议吗？查看下面的图像。

Image of props state Image of AppState from Redux Dev Tool

Reducer：

export interface ToDoState {
    toDos : ToDoElement[],
    errors : String[]
}

const InitialState: ToDoState = {
    toDos : [],
    errors: []
}


export function  toDoReducer(state = InitialState,action: ToDoActionTypes) : ToDoState{
    switch(action.type){
        case ToDoActions.ADD_TODO:
            state.toDos = [action.todo,...state.toDos]
        return state;
        case ToDoActions.FETCH_REQUEST:
            return state;
        case ToDoActions.FETCH_SUCCESS:
        state.toDos = action.todos;
            return state;
        case ToDoActions.FETCH_ERROR:
            return state;
        case ToDoActions.REMOVE_TODO:
        state.toDos.filter(x=>x !== action.todo);
            return state
        case ToDoActions.RENAME_TODO:
      state.toDos = state.toDos.map((item) => {
            if(item.id === action.todo.id) {
                action.todo.tittle = action.newName;
              return item;
            }

            return item;
          });
        return state

         default :
            return state;

    }
}

查看Redux connect和componnent呼叫重拨操作

     componentDidMount() {
            this.props.startFetchToDos();
        }

        render(){
            const items = this.props.toDoState.toDos.map((item,i)=>
            <SingleToDo todo={item} key={i} > </SingleToDo>
       );

interface LinkStateProp{
    toDos : ToDoElement[]
    toDoState:ToDoState
}
interface LinkDispatchProps{
    startFetchToDos: () =>void;
}

const mapStateToProps = (state:AppState) : LinkStateProp =>({
  toDos : state.toDo.toDos,
  toDoState:state.toDo
});


const mapeDispatchToProps = (dispatch: ThunkDispatch<any,any,AppActions>)  :  LinkDispatchProps =>({
    startFetchToDos: bindActionCreators(fetchToDos,dispatch)
});

export default connect(mapStateToProps,mapeDispatchToProps)(Home);

商店

const rootReducer = combineReducers({
    toDo:toDoReducer
});

export type AppState = ReturnType<typeof rootReducer>

export default function configureStore() {
  const middlewares = [thunkMiddleware];
  const middleWareEnhancer = applyMiddleware(...middlewares);

  const store = createStore(
    rootReducer,
    composeEnhancers(middleWareEnhancer)
  );

  return store;
}

Answer 1

这是关于您正在还原化器内部的redux状态的事实。永远不要改变您的redux状态。而是使用不可变的更新模式。

https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns

我已经更新了有关该问题的减速器案例。您应该能够更改其他人。

export function  toDoReducer(state = InitialState,action: ToDoActionTypes) : ToDoState{
    switch(action.type){
        case ToDoActions.ADD_TODO:
            // state.toDos = [action.todo,...state.toDos]
            return { ...state, toDos: [ ...state.toDos, action.todo ] }
        case ToDoActions.FETCH_REQUEST:
            return state;
        case ToDoActions.FETCH_SUCCESS:
            // state.toDos = action.todos;
            return { ...state, toDos: [ ...action.todos ] }
        case ToDoActions.FETCH_ERROR:
            return state;
         default :
            return state;

    }
}

事实是，您连接的组件正在比较当前状态和下一个状态。但是由于两者都引用同一个对象，因此不会发生任何重新渲染。

道具在视图中为空，但不在REDUX STATE中

1 个答案: