How to pass store state as a prop in react-redux-typescript?

Question

I'm trying to pass information from the initial state of store to a component where it's rendered, but it's not showing. A console.log in the component itself showed that it was undefined. There is nothing wrong with the initial state, I can access it using a console.log statement in App.tsx , so I suspect it's got something to do with passing it down as a prop or it needs initialization with componentDidMount or similar.

reducers.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

I just breifly check your script and i think your reducer function is wrong

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
        }
}

I hope it will works for you.

Answer 2

In the below line

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

you are adding the Tasks component but you are not passing a prop called tasks thats why it is showing as undefined try rendering the component in the same file

Or you can do it like this

mapStateToProps and mapDispatchToProps both take ownProps as the second argument.

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

For reference here

Answer 3

When you pass the taskReducer to combineReducers using object property shorthand, your reducer will be named taskReducer in the store, your store looks like this

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

So when you try to select tasks in mapStateToProps , state.tasks is undefined

The type of the root state is not TaskListState , to get the type of your store use ReturnType

type RootState = ReturnType<typeof TaskList>

And finally change the path to your tasks list in mapStateToProps together with the new type of the RootState which will prevent this kind of errors in the future

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