使用redux调用api时,componentWillReceiveProps方法不再运行

Question

我打算用调用API redux:我用axios,history,react-redux,react-router-native,react-router,, redux-promise-middleware,redux-thunk组件使用使API调用redux:我做了Reducers文件夹,并把我所有的减速机文件中有自己的文件,并在主文件中像这样,这是他们结合我的generateoptReducer.js文件:

const initialState = {
    data: {},
    error: null,
    status: null
};
import {generateOTP} from '../Actions/api';
export default function reducer(state = initialState, action) {

    switch (action.type) {
        case (action.type === 'GENERATEOTP_PENDING' || {}).input:
            // Action is pending (request is in progress)
            return {...state, status: 'fetching',methodes:'done1'};
        case (action.type === 'GENERATEOTP_FULFILLED' || {}).input:
            // Action is fulfilled (request is successful/promise resolved)
            return {
                ...state,
                error: null,
                data: action.payload.data,
                status: 'success',
                methodes:'done1'
            };
            case 'generateOTP':
                // Action is fulfilled (request is successful/promise resolved)
                return {
                    ...state,
                    error: null,
                    data: action.payload.data,
                    status: 'success',
                    methodes:'done1'
                };
        case (action.type === 'GENERATEOTP_REJECTED' || {}).input:
            // Action is rejected (request failed/promise rejected)
            return {
                ...state,
                error: action.payload,
                status: 'error'
            };
        default:
            return state;
    }
};

并将它们组合在index.js文件中:

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

//import api from './api-reducer';


import generateotp from './generateotpReducer';
import login from './loginReducer';

export default combineReducers({
  generateotp,
  login,
  routing: routerReducer,
});

我还创建了另一个文件夹Action,并将所有api放在名为api.js的文件中:

这是我上面的减速器动作:

export const generateOTP = (phone_number) => ({
    type: 'GENERATEOTP',
    payload: axios({
        method: 'GET',
        url: format(generate_endpoint, phone_number, serviceId),
        headers: {"Accept": "application/json","Content-Type":"application/json"}
    })
});

这也是我的商店:

import { applyMiddleware, createStore } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import logger from 'redux-logger'
import reducers from './Reducers';

export default function configureStore(history) {
  const middleware = applyMiddleware(
    promiseMiddleware(),
    thunk,

    routerMiddleware(history));
  return createStore(reducers, {}, middleware);
}

这就是我调度动作的方式:在我的组件文件的上面导入如下:

import { generateOTP } from "../Components/Actions/api";

并发送这样的动作:

this.props.dispatch(generateOTP(formatted_phone_number));

我还在文件的底部连接这样的组件:

export default connect(state => state)(SignIn)

现在我需要这个api的结果.我曾经使用该componentWillReceiveProps方法来接收结果.我不知道为什么这个组件没有运行.我搜索得太多我发现一个混乱的结果,说状态没有改变然后componentWillReceiveProps不运行!好的是api调用成功,我可以看到日志,我可以看到%cGENERATEOTP_PENDING,然后%cGENERATEOTP_FULFILLED在日志和api调用成功但问题是与componentWillReceiveProps(我不再运行)我曾经收到的api电话的结果.

Answer 1

componentWillReceiveProps (nextProps){

console.log('get here',nextProps. fullState)

}

像这样使用连接

function mapStateToProps(state) {
console.log('get your state here',state)
  return {
   fullState: state.appState,
  };
}

export default connect(mapStateToProps, {generateOTP})(SignIn);