Redux:行动已成功分派，但未创建国家
Redux:行动已成功分派，但未创建国家
提问于 2021-01-11 03:08:17
我只是在制作一个简单的应用程序来学习Redux。我使用Redux DevTools查看我的两个状态:列表和待办事项。然而，它只显示待办事项，尽管我尝试了我所知道的一切，但它没有显示列表
初始国家：
单击“添加”按钮后：
这是我的密码：
lists.js
import { createSlice } from "@reduxjs/toolkit";
const slice = createSlice({
name: "lists",
initialState: [],
reducers: {
listAdded: (lists, action) => {
lists.push({
id: action.payload.id,
title: action.payload.title,
todos: action.payload.todos,
});
},
},
});
export const { listAdded } = slice.actions;
export default slice.reducer;todos.js
import { createSlice } from "@reduxjs/toolkit";
const slice = createSlice({
name: "todos",
initialState: [],
reducers: {
todoAdded: (todos, action) => {
todos.push({
id: action.payload.id,
content: action.payload.content,
check: action.payload.check
});
},
todoEdited: (todos, action) => {
const index = todos.findIndex((todo) => todo.id === action.payload.id);
todos[index].content = action.payload.content;
}
}
});
export const { todoAdded, todoEdited } = slice.actions;
export default slice.reducer;reducer.js
import { combineReducers } from "redux";
import todosReducer from "./todos";
import listsReducer from "./lists";
export default combineReducers({
lists: listsReducer,
todos: todosReducer
});configureStore.js
import { configureStore } from "@reduxjs/toolkit";
import reducer from "./reducer";
const store = () => {
return configureStore({ reducer });
};
export default store();index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./configureStore";
import { Provider } from "react-redux";
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById("root")
);因此，正如您所看到的，在我使用调度之后，它会采取相应的操作。但是，由于它没有状态，所以当我使用lists.map时，它会说'TypeError:无法读取未定义的属性‘映射’
请问我做错了什么？请帮帮我！我很感激你！
编辑:放置更多与添加按钮相关的代码：
App.js
import React from "react";
import ItemTodo from "./ItemTodo";
import ItemList from "./ItemList";
import { useSelector } from "react-redux";
import NewListButton from "./NewListButton";
import NewTodoButton from "./NewTodoButton";
function App() {
const todos = useSelector((state) => state.todos);
const lists = useSelector((state) => state.lists);
return (
<div className="App">
<div className="todo-list">
<NewListButton />
<div>
{lists.map((item) => (
<ItemList key={item.id} title={item.title} />
))}
</div>
<div>
<h2>write a todo</h2>
{todos.map((item) => (
<ItemTodo
key={item.id}
id={item.id}
content={item.content}
check={item.check}
/>
))}
<NewTodoButton />
</div>
</div>
</div>
);
}
export default App;ItemList.js
import React from "react";
const ItemList = ({ title }) => {
return (
<div className="list-item">
<h2>{title}</h2>
<div className="list-edit">edit name</div>
<div className="list-remove">remove list</div>
</div>
);
};
export default ItemList;ItemTodo.js
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { todoEdited } from "./todos";
const ItemTodo = ({ id, content, check }) => {
const dispatch = useDispatch();
const [contentX, setContentX] = useState("");
const inputTodo = (e) => {
setContentX(e.target.value);
};
const clickEdit = (e) => {
e.preventDefault();
dispatch(todoEdited({ id, content: contentX }));
};
return (
<div>
<form className="nav-submit">
<input
type="text"
onClick={inputTodo}
onChange={inputTodo}
value={contentX}
onBlur={clickEdit}
/>
</form>
</div>
);
};
export default ItemTodo;NewListButton.js
import { listAdded } from "./lists";
import { v4 as uuidv4 } from "uuid";
import { useDispatch } from "react-redux";
import React, { useState } from "react";
const NewListButton = () => {
const dispatch = useDispatch();
const [titleX, setTitleX] = useState("");
const getListTitle = (e) => {
setTitleX(e.target.value);
};
const setNewList = (e) => {
e.preventDefault();
const id = uuidv4();
dispatch(listAdded({ id, title: titleX, todos: [] }));
setTitleX("");
};
return (
<div className="nav-list">
<h2>write a list</h2>
<form action="">
<input type="text" onChange={getListTitle} value={titleX} />
<button className="button-newlist" onClick={setNewList}>
New List
</button>
</form>
</div>
);
};
export default NewListButton;NewTodoButton.js
import React from "react";
import { v4 as uuidv4 } from "uuid";
import { useDispatch } from "react-redux";
import { todoAdded } from "./todos";
const NewTodoButton = () => {
const id = uuidv4();
const dispatch = useDispatch();
const newTodo = (e) => {
e.preventDefault();
dispatch(todoAdded({ id, content: "", check: true }));
};
return (
<div>
<button className="button-new" onClick={newTodo}>
New Todo
</button>
</div>
);
};
export default NewTodoButton;编辑:更多信息。
有件事很奇怪：
我添加了一个文件: ListInitialState.js
const ListInitialState = [
{
id: 1,
title: "first list",
todos: [],
},
];
export default ListInitialState;然后将ListInialState.js导入到list.js：
import ListInitialState from "./ListInitialState";
import { createSlice } from "@reduxjs/toolkit";
const slice = createSlice({
name: "lists",
initialState: ListInitialState,
reducers: {
listAdded: (lists, action) => {
lists.push({
id: action.payload.id,
title: action.payload.title,
todos: action.payload.todos,
});
},
},
});
export const { listAdded } = slice.actions;
export default slice.reducer;最后，它成功了，但我不知道为什么：
如果有人能解释的话那就太好了。我真的很感激！
Stack Overflow用户
发布于 2021-01-11 03:18:29
可能您没有启用redux工具。
您可以使用此配置启用redux工具。
const store = configureStore({
reducer,
devTools: process.env.NODE_ENV !== 'production',
})Redux DevTools扩展被禁用用于生产
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65660882
复制相关文章
相似问题
腾讯云开发者
