javascript - 如何使用功能组件从 Redux 存储中检索数据并避免 useSelector 和 useDispatch
问题描述
我正在 React-Redux 中尝试 Todo App;运行 store、actions、reducer 和 Addodo 组件;但被困在显示待办事项上:
如果我的 initialState=[] 我如何从存储中检索数据?
店铺:
import { createStore } from 'redux';
import rootReducer from '../reducer';
export const store = createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
export default store
我的减速机:
const initialState = [];
const todos = (state = initialState, action) => {
switch(action.type) {
// Aca va tu codigo;
case 'AddTodo':
return [...state, action.payload];
case 'RemoveTodo':
return state.filter(todo => todo.id !== action.payload)
case 'ToInProgress':
return state.map((todo) =>
todo.id === action.payload ? { ...todo, status: "InProgress" } : todo
);
case 'ToDone':
return state.map((todo) =>
todo.id === action.payload ? { ...todo, status: "Done" } : todo
);
default:
return state
}
}
export default todos;
应用程序.js:
import React from 'react'
import { Route } from "react-router-dom"
import {Provider} from 'react-redux'
import store from './store/index'
import Nav from '../src/components/Nav/Nav'
import Home from '../src/components/Home/Home'
import AddTodo from '../src/components/AddTodo/AddTodo'
import TodoDetail from '../src/components/TodoDetail/TodoDetail'
import './App.css';
export function App() {
return (
<React.Fragment>
<Provider store={store}>
<Nav />
<Route exact path="/" component={Home} />
<Route path="/add" component={AddTodo} />
<Route path="/edit/:id" component={TodoDetail} />
</Provider>
</React.Fragment>
);
}
export default App;
主页.js:
import React from 'react';
import Todos from '../Todos/Todos'
import './home.css'
export function Home() {
return (
<div className="todosContainer">
<div>
<Todos status="Todo"/>
<label>TODO</label>
</div>
<div>
<Todos status='InProgress' />
<label>InProgress</label>
</div>
<div>
<Todos status='Done'/>
<label>Done</label>
</div>
</div>
)
};
export default Home;
这是 AddTodo:
export function AddTodo() {
const [state,setState]=React.useState({
title:"",
description:"",
place:"",
date:"",
})
function handleChange(e){
const value=e.target.value;
setState({
...state,
[e.target.name]:value
})
}
function handleSubmit(e){
e.preventDefault();
store.dispatch(addTodo({
place:state.place,
title:state.title,
date:state.date,
description:state.description
})) // parameters "id" & "status" loaded in Actions.
setState({title:"",
description:"",
place:"",
date:"",})
}
return (
<div className="todoContainer">
<form id="formulario"onSubmit={handleSubmit} >
<label>
Title
<input type="text" name="title" value={state.title} onChange={handleChange} />
</label>
<label>
Description
<textarea type="text" name="description" value={state.description} onChange= {handleChange}/>
</label>
<label>
Place
<input type="text" name="place" value={state.place} onChange={handleChange}/>
</label>
<label>
Date
<input type="text" name="date" value={state.date} onChange={handleChange}/>
</label>
<button className="boton" type="submit" onClick={addTodo}>Agregar</button>
</form>
</div>
)
};
function mapDispatchToProps(dispatch){
return{
addTodo: todo => dispatch(addTodo(todo))
}
}
export default connect(mapDispatchToProps)(AddTodo)
现在,我想在 Todos 组件上展示,每个 Todos “标题”,仍然不知道如何执行它:
export function Todos(data) {
return (
<div className="todoDetail">
<h4>{data.title}</h4>
</div>
)
};
function mapStateToProps(state) {
return {
data: state.title,
};
}
export default connect(mapStateToProps)(Todos)
解决方案
您正在寻找useSelector挂钩。
不要store.getState()
在功能组件中使用。此外,您不需要connect
函数组件,使用useDispatch钩子。
从 store 中获取值将是这样的:
const todos = useSelector(store => store.items);
推荐阅读
- swift - 下载firebase存储网址不起作用
- c - C - 读取文件并打印到文件后获取无效字符,-也许-缓冲区溢出
- html - 一个 autocomplete="off" 示例有效,我的代码 autocomplete="off" 没有?
- c# - 按连接度划分的图
- python - 使用 Pandas 读取嵌套 JSON 的 KeyError
- javascript - 使用 JavaScript 连接数组中的连续(相关)对象
- colors - 终端 emacs 内的曝光颜色
- scheme - 计算多个子列表方案中的元素数
- python - 从稀疏数组有效地计算成对 Jaccard 相似度
- c - 当递归函数在c中达到高深度时停止递归函数