How can i update the redux state using redux-form

Question

I've a problem with redux-form. I want my onSubmit to trigger the action and this action will send input values through payload to the reducer, however it didn't work

i

TodoForm.js

import {Field,reduxForm} from 'redux-form'
import {connect} from'react-redux'
import {addTodo} from '../action/index'
 class TodoForm extends Component{
     //submit = values =>{
       //  console.log(values)
    // };

    render(){
        const {handleSubmit,onSubmit} =this.props;
        return(
            <form onSubmit={handleSubmit(onSubmit)}>
                <label htmlFor='todo'>Add todo</label>
                <Field name='todo'component='input'type='text'/>
                <button type='submit'> add</button>
            </form>
        );
    }
}
TodoForm = reduxForm({
    form : 'todo',

})(TodoForm)

export default connect(null,{addTodo})(TodoForm);

TodoList.js

import {connect} from 'react-redux';
import {addTodo} from '../action/index'
import TodoForm from'./TodoForm'
import Todo from './Todo'
class TodoList extends Component{
    /*constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);

    }
    handleClick(e){
        let value = e.value;
        //e.preventDefault();
        return(this.props.addTodo(value));

    }
    handleChange(e){
        return e.target.value;
            //this.props.addTodo(e.target.value)

    }*/
    submit = values =>{
        console.log(values)
    }
    render(){
        console.log('form value : ', this.props.formValue)
        return(
            <div>
                <h1>TodoList</h1>
                <TodoForm onSubmit={addTodo(this.props.formValue)}/>
                <Todo/>
            </div>
        );
    }
}
//export default TodoList;
function mapStatetoProps({form}){
    console.log('form todo',form.todo ? form.todo.values : null);
   return ({formValue : form.todo ? form.todo.values : null});
  /*  return({
        formValue : form.todo.values
    }) */ 


}
export default connect(mapStatetoProps,{addTodo})(TodoList);

action/index.js

let nextTodoId = 0;
export const addTodo = values =>{
   return dispatch => 
   dispatch({
       type: ADD_TODO,
       payload : values,
       id : nextTodoId++
   });

}

reducer/index.js

import {combineReducers } from 'redux';
import {reducer as formReducer} from 'redux-form';
export function addTodoReducer (state=[],action){
    console.log('cehck before switch',state,action)
    switch (action.type) {
        case ADD_TODO:
        console.log('check praram',action,state)
        return (
            state = [...state,{todo : action.payload, id : action.id}]);
       default: return state;

    }
}
const rootReducer = combineReducers({
    todos : addTodoReducer,
    form : formReducer
});
export default rootReducer;

src/index.js

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducer/index';
import thunk from 'redux-thunk';
//import all redux dependecies
const store = createStore(rootReducer,{},applyMiddleware(thunk));

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

I need the store to update the todo list and todo component will render the new list.

Error TypeError: dispatch is not a function enter image description here

Answer 1

Same problem I have in my previous project. Try this in your action.we can not directly access dispatch. So pass it as given belove

action/index.js

let nextTodoId = 0;
export const addTodo = (values) =>
(dispatch) =>{ 
dispatch({
type: ADD_TODO,
payload : values,
id : nextTodoId++
});
}

I hope this will help you