[英]How to pass store state as a prop in react-redux-typescript?
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.
组件本身中的 console.log 显示它是未定义的。 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.初始状态没有任何问题,我可以使用
App.tsx
的 console.log 语句访问它,所以我怀疑它与将它作为道具传递有关,或者它需要使用componentDidMount
或类似方法进行初始化。
reducers.tsx:减速器.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:获取任务.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:任务.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>
)
}
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.我希望它对你有用。
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您正在添加 Tasks 组件,但没有传递名为 tasks 的道具,这就是为什么它显示为未定义的原因 尝试在同一文件中渲染该组件
Or you can do it like this或者你可以这样做
mapStateToProps and mapDispatchToProps both take ownProps as the second argument. mapStateToProps 和 mapDispatchToProps 都将 ownProps 作为第二个参数。
[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):
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当您通过
taskReducer
到combineReducers
使用对象属性的简写,您的减速将被命名为taskReducer
在店里,你的店看起来像这样
const store = {
taskReducer: {
tasks: [{
name: "testing123",
done: false,
}]
}
}
So when you try to select tasks in mapStateToProps
, state.tasks
is undefined
因此,当您尝试在
mapStateToProps
选择任务时, state.tasks
undefined
The type of the root state is not TaskListState
, to get the type of your store use ReturnType根状态的类型不是
TaskListState
,要获取您商店的类型使用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最后路径更改为您的
tasks
列表中mapStateToProps
新类型的一起RootState
这将防止这种错误在未来
const mapStateToProps = (state: RootState) => ({
tasks: state.taskReducer.tasks
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.