如何使用 redux-form 更新 redux state

Question

我對 redux-form 有疑問。 我希望我的 onSubmit 觸發該操作，該操作將通過有效負載將輸入值發送到減速器，但是它不起作用

一世

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);

動作/index.js

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

}

減速器/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'));

我需要商店來更新待辦事項列表，待辦事項組件將呈現新列表。

錯誤類型Error: dispatch is not a function enter image description here

Answer 1

我在之前的項目中遇到了同樣的問題。 在您的操作中嘗試此操作。我們無法直接訪問調度。 所以把它當作給定的愛

動作/index.js

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

I hope this will help you