Реквизит пуст в поле зрения, но не в REDUX STATE

Question

У меня есть проблемы с моим REACT-REDUX.Я просто следую этому руководству: https://redux.js.org/recipes/usage-with-typescript.

Redux просто обновляет свое состояние, когда я вызываю Thunk Action из представления, чтобы подтвердить, что я просто проверяю инструмент разработки REDUX для проверки текущего состояния.Проблема в том, что я беру реквизит из Redux и хочу отобразить все элементы в массиве ToDos. REDUX devtools показывает мне, что в этом массиве есть 2-3 элемента, но реквизит пуст.Любые предложения?Проверьте изображения ниже.

Изображение состояния реквизита Изображение AppState из Redux Dev Tool

Редуктор:

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 и Thunk Action Thunk Action

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

Store

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

Речь идет о том факте, что вы изменяете свое состояние редукса внутри вашего редуктора.Никогда не изменяйте свое состояние притока.Вместо этого используйте неизменные шаблоны обновления.

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;

    }
}

Дело в том, что ваши подключенные компоненты сравнивают текущее состояние и следующее состояние.Но так как оба ссылаются на один и тот же объект, перерисовка не происходит.