i building react + redux app using php backend. have simple login form so:
import react, {component} 'react'; import {reduxform} 'redux-form'; import {loginuser} '../actions/index'; class loginform extends component { render() { const {fields: {username, password}, handlesubmit} = this.props; return ( <form onsubmit={handlesubmit(this.props.loginuser)}> <input type="string" placeholder="username" {...username} /> <input type="password" placeholder="password" {...password} /> <input type="submit" /> </form> ); } } export default reduxform({ form: 'login', fields:['username', 'password'] }, null, {loginuser})(loginform);
i using redux-form
manage form data handling. use loginform
(an action creator) post data php backend so:
export function loginuser(props) { console.log('props', props); const request = axios.post(login_page, props); return { type: login_user, payload: request } }
the console.log
correctly displays data login form.
here php backend:
if (!is_user_logged_in()) { $username = $_post['username']; $username = $username . 'test'; $password = $_get['password']; $response = array( 'username' => $username ); wp_send_json($response); }
here relevant reducer:
export default function(state = initial_state, action) { switch(action.type) { case login_user: console.log('reducer', action.payload.data); return { ...state, statuscode:action.payload.data, user:action.payload.data } } return state; }
when log action.payload.data
, {username: 'test'}, indicating backend not getting data form. i.e. if type username
abc, should abctest, opposed test.
where going wrong?
it seems method get
used form submission. that's why $_post['username']
results in null. should use method post
, fetch password $_post['password']
instead of $_get['password']
well.
Comments
Post a Comment