Нашел и интернете верстку todoList на redux,
Переделал его немного для читаемости
У меня один вопрос, где брать данные для отрисовки новой todo?
на форме стоит dispatch action который находится в редъюсере и как я понял новая todo сохраняется в reducer, как ее оттуда взять, что в данном случае является ({ todos })? деструктурированный reducer?
index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducer from './reducers'
import App from './components/App'
let store = createStore(reducer)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
reducers/index.js
const ADD = 'ADD_TODO'
let nextTodoId = 0
export const actions = {
add: (text) => ({type: ADD, text, id: nextTodoId++}),
}
const reducer = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
id: action.id,
text: action.text,
completed: false
}
]
default:
return state
}
}
export default reducer
addTodo.js
import React from 'react'
import actions from '../reducers'
let AddTodo = ({ dispatch }) => {
let input
return (
<div>
<form
onSubmit={e => {
e.preventDefault()
if (!input.value) {
return
}
dispatch(actions.add(input.value))
input.value = ''
}}
>
<input
ref={node => {
input = node
}}
/>
<button type="submit">
Add Todo
</button>
</form>
</div>
)
}
export default AddTodo
и отрисовка новой todo
import React from 'react'
import Todo from './Todo'
const TodoList = ({ todos}) => (
<ul>
{todos.map(todo => (
<Todo key={todo.id} {...todo} />
))}
</ul>
)
export default TodoList
Простой
