Discussion :

[Taylor-Dev]

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

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)

**ACTIONS.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}};

**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
	      }
         }

**COMBINE REDUCER.JS**

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
        // COMBINE REDUCER 
         const reducer = combineReducers({
          groupReducer,
          form: formReducer
         });

**SAGAS.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
       //  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)
         ])
        }