2

プロファイルの状態を redux にしようとしています。フォームとアクションはすべて正しく機能していますが、アクションのペイロードはレデューサーに送られると未定義です。初歩的なミスであることは確かだけど、一生見てられないよ。

私は、テンプレートとして Stephen Grider の udemy コースに従い、ログインに適用されたものとまったく同じパターンを使用して、彼の投稿セクションを機能させました。redux-promise はミドルウェアで正しく配線されています。

package.json (部分)

"react": "^16.2.0",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-form": "^7.2.3",
"redux-forms": "^1.0.0-3",
"redux-promise": "^0.5.3",

ログイン コンポーネント:

function mapStateToProps(state){
  return {
    profile:state.profile
  };
}

export default reduxForm({
  validate,
  form:'PostsNewForm'
})(
  connect(mapStateToProps,{login})(Login)
);

アクション プロファイル

export const profileActions = {
    login:'uaLogin',
    logout:'uaLogout',
    register:'uaRegister',
    getAll:'uaGetAll',
    getOne:'uaGetOne',
    delete: 'uaDelete'
};

const pa=profileActions;

export function login(values, callback){
  const request=axios.post(`/api/authenticate`,values)
    .then ((res)=> {
      console.log ('*** action:',res.data);//res.data  correctly appears
      callback()
    });
  return {
    type: pa.login,
    payload:request
  }
}

レデューサープロファイル

import {profileActions as pa} from '../actions';

let profile = JSON.parse(localStorage.getItem('profile'));
const initialState = profile ? { loggedIn: true, profile } : {};

export default function authentication(state = initialState, action) {
  switch (action.type) {
    case pa.login:
      console.log('***reducer',action.payload.data);//action.payload is undefined
      return {
        action.payload.data 
      };
    default:
      return state
  }
}
4

2 に答える 2

1

.then ステートメントが const 要求に直接添付されているため、エラーが発生しています。これは約束を解決し、リクエストを未定義に変更しています。

これを変える：

const request=axios.post(`/api/authenticate`,values)
  .then ((res)=> {
  console.log ('*** action:',res.data);//res.data  correctly appears
  callback()
});

これに:

const request=axios.post(`/api/authenticate`,values);

2番目の問題は、フォールバックを介してフォームでアクションを実行しようとしていて、反応と還元のパラダイムを忘れていることです。この場合のコールバックは必要ありません。

代わりに、componentDidMount または場合によっては componentWillMount を見て、状態を確認して、移動するかどうかを決定する必要があります。

于 2018-03-04T16:25:27.857 に答える