Bonjour tout le monde,
j'ai un petit problème sur mon application, j'essaye de créer un type POST en appelant mon API tout en lui envoyant les données de mon form.
mais j'ai une erreur "invalid form" alors que je recupere bien les données.
je début aussi avec redux, redux-sagas, c'est pour cela que j galère un peu...
Si quelqu'un a une idée, je suis à l’écoute, merci
**COMPONENT.JS**
**ACTIONS.JS**
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 class CreatGroup extends React.Component{ // function to post handleFormSubmit = (dataForm) => { console.log(dataForm, ' DATA FORM') this.props.dispatch(createPostGroup(dataForm)) } render() { // my form const { handleSubmit, submitting } = this.props return( <div> <form onSubmit={handleSubmit(this.handleFormSubmit)}> <div> <Field name="amount" component={renderField} type="number" label="amount" /> </div> <div> <Field name="duration" component={renderField} type="number" label="duration" /> </div> <div> <Field name="limit_members" component={renderField} type="number" label="max members" /> </div> <div> <button type="submit" disabled={submitting}>Submit</button> </div> </form> </div> ) } } CreatGroup = reduxForm({ form:'createGroup' })(CreatGroup)
**REDUCER.JS**
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 // CONST ACTIONS const CREATE_GROUP = 'CREATE_GROUP' //ACTIONS export function createPostGroup(data){ return { type: CREATE_GROUP, data}};
**COMBINE REDUCER.JS**
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 // REDUCER const initialState = { status: false, message: 'Group show all successfully', data: '' }; export default function groupReducer( state=initialState, action){ switch (action.type){ case CREATE_GROUP: return { status: true, message: 'Group create successfully', data: action.data } case CREATE_GROUP_FAIL: return { status: false, message: 'ACTION CREATE FAILS', data: action.data } default: return state } }
**SAGAS.JS**
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 // COMBINE REDUCER const reducer = combineReducers({ groupReducer, form: formReducer });
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 // CALL API export function* createApiDataGroup(action){ try { const data = yield call(axios.post, 'http://localhost:8000/api/create'); yield put({ type: "CREATE_GROUP", data }) } catch (e) { yield put({ type: "CREATE_GROUP_FAIL", e}) } } export default function* mySaga() { yield all([ takeEvery('CREATE_GROUP', createApiDataGroup) ]) }
Partager