Как передать состояние хранилища в качестве опоры в реагировать на редукцию?

Question

Я пытаюсь передать информацию из исходного состояния хранилища в компонент, где она отображается, но не отображается. Файл console.log в самом компоненте показал, что он не определен. В начальном состоянии нет ничего плохого, я могу получить к нему доступ с помощью оператора console.log в App.tsx, поэтому я подозреваю, что он как-то связан с передачей его в виде проп, или его нужно инициализировать с componentDidMount или подобным.

redurs.tsx:

import { combineReducers } from 'redux';
import {
    TaskListState,
    TaskActionTypes,
    ITask,
    ADD_TODO
} from './types'

const initialState:TaskListState = {
    tasks: [
        {
            name: "testing123",
            done: false,
        }
    ]
}

export function taskReducer(state = initialState, action: TaskActionTypes)
    : TaskListState {
        switch(action.type){
            case ADD_TODO:
                let newTask:ITask = {
                    name: action.name,
                    done: false
                }
                return {
                    tasks: [...state.tasks, newTask]
                }
            default:
                return state
        }
}

//create another reducer for the filtering, then combine the reducers

const TaskList = combineReducers({
    taskReducer
})

export default TaskList

GetTask.tsx:

import { connect } from 'react-redux'
import { TaskListState } from '../../redux/tasks/types'
import { Tasks } from '../tasks/Tasks'

const mapStateToProps = (state:TaskListState) => ({
    tasks: state.tasks
})

const mapDispatchToProps = {
}

export const Connector = connect(mapStateToProps, mapDispatchToProps)(Tasks)

Tasks.tsx :

import { ITask } from '../../redux/tasks/types'

import React from 'react';
import './Tasks.css';

type Props = {
    tasks: ITask[];
}

export const Tasks: React.FC<Props> = (props:Props) => {
    const { tasks } = props;
    console.log(tasks);
    return (
        <div>
        { tasks }
        </div>
    )
}

Answer 1

В строке ниже

export const Connector = connect(mapStateToProps, mapDispatchToProps)(Tasks)

вы добавляете компонент Задачи, но не пропускаете реквизит, называемый задачами, поэтому он отображается как неопределенный, попробуйте отрендерить компонент в том же файле

Или вы можете сделать это следующим образом

mapStateToProps и mapDispatchToProps оба принимают ownProps в качестве второго аргумента.

[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

Для справки здесь

Answer 2

Когда вы передаете taskReducer в combineReducers с использованием сокращения свойства объекта, ваш редуктор будет называться taskReducer в магазине, ваш магазин будет выглядеть так

const store = {
  taskReducer: {
    tasks: [{
      name: "testing123",
      done: false,
    }]
  }
}

Поэтому, когда вы пытаетесь выберите задачи в mapStateToProps, state.tasks - это undefined

Тип состояния root не TaskListState, для получения типа вашего магазина используйте ReturnType

type RootState = ReturnType<typeof TaskList>

И, наконец, измените путь к вашему списку tasks в mapStateToProps вместе с новым типом RootState, который предотвратит подобные ошибки в будущем

const mapStateToProps = (state: RootState) => ({
    tasks: state.taskReducer.tasks
})

Answer 3

Я просто кратко проверил ваш сценарий и думаю, что ваша функция редуктора неверна

export function taskReducer(state = initialState, action: TaskActionTypes)
    : TaskListState {
        switch(action.type){
            case ADD_TODO:
                let newTask:ITask = {
                    name: action.name,
                    done: false
                }
                return {
                    // tasks: [...state.tasks, newTask]
                    [...state.tasks, newTask]
                }
            default:
                return state
        }
}

Надеюсь, это сработает для вас.