Redux редактировать todo

Question

Я изучаю Redux.

Может кто-нибудь объяснить пошагово, как добавить функциональность редактирования в этом примере: https://codepen.io/anon/pen/bxQOaw?editors=0010

Я добавил действия и редукторы, но не уверен, как передать его на компоненты без состояния.

Действие:

export const editTodo = (text) => {
    const action = {
      type: 'EDIT_TODO'
    }
    console.log('action in editTodo', action);
    return action;
}

Редуктор:

const todo = (state, action) => {   switch (action.type) {
    case 'EDIT_TODO':
      if (state.id !== action.id) {
        return state;
      }

      return {
        ...state,
        text: action.text
      };
    default:
      return state;   } }; const todos = (state = [], action) => {   switch (action.type) {
    case 'EDIT_TODO':
      return state.map(t =>
        todo(t, action)                
      );

    default:
      return state;   } }

Нужно ли преобразовывать эти компоненты без состояния в классы?

Answer 1

Вы должны собрать все свои редукторные редукторы в один гигантский редуктор, используя combReducers

import ToDoReducer from './todo-reducer.js';
import OtherReducer from './other-reducer.js';
import {combineReducers} from 'redux';

const allReducers = combineReducers({
    ToDo:ToDoReducer,
    OtherR:OtherReducer,
});

export default allReducers;

Затем в своем корневом файле примените комбинированный редукторный редуктор с помощью провайдераact-rudux.

import thunk from 'redux-thunk';
import { Provider } from 'react-redux';

const store = createStore(allReducers, applyMiddleware(thunk));

class App extends React.Component{
render(){
    return(
        <Provider store={store}>
            <YourSecondaryMainComponent />
        </Provider>
    )
}
.... 

Затем вы можете использовать их в своих компонентах с помощью connect и bindActionCreators.

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import editTodo from './todoFunctions.js';

class myComponent extends React.Component{
   ...
}

let mapStateToProps = (state)=>{return {ToDo:state.ToDo}; };
let matchDispatchToProps = (dispatch)=>{ return bindActionCreators({ editTodo }, dispatch); }
export default connect(mapStateToProps,matchDispatchToProps)(myComponent);