Elrock
@Elrock

Где брать данные для отрисовки в redux?

Нашел и интернете верстку 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
  • Вопрос задан
  • 74 просмотра
Решения вопроса 1
user_of_toster
@user_of_toster
React и Redux-store по умолчанию не знают о существовании друг друга, поэтому вам нужно подключить модуль react-redux.

Без модуля - для получения данных нужно делать store.getState().todos для изменения данных store.dispatch(action). store нужно предварительно экспортировать в index.js, а потом импортировать в отрисовка новой todo
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы