Как я могу обновить состояние избыточности, используя форму-избыточность? - PullRequest
Новая
       7

Как я могу обновить состояние избыточности, используя форму-избыточность?

0 голосов
/ 19 сентября 2019

У меня проблема с избыточной формой.Я хочу, чтобы мой onSubmit инициировал действие, и это действие будет отправлять входные значения через полезную нагрузку в редуктор, однако это не сработало

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

Мне нужно хранилище для обновления списка задач, и компонент todo отобразит новый список.

Ошибка TypeError: отправка не является функцией введите описание изображения здесь

1 Ответ

0 голосов
/ 19 сентября 2019

Та же проблема, что и у меня в предыдущем проекте.Попробуйте это в своем действии. Мы не можем получить прямой доступ к отправке.Так что передайте это как дано любимому

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
...