【发布时间】：2018-05-08 19:52:29
【问题描述】：
我将使用redux 调用api：
我使用axios,history,react-redux,react-router-native,react-router,,redux-promise-middleware,redux-thunk组件使用redux进行api调用：
我创建了Reducers 文件夹并将我所有的reducer 文件放在他们自己的文件中，并将它们组合到这样的主文件中
这是我的 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 调用的结果。
【问题讨论】：
-
对不起，如果我的问题很愚蠢，您将实际部署哪个文件
componentWillReceiveProps，提供足够的信息总是好的，但是这个很难追踪。也许您可以重新组织它以帮助想要伸出援助之手的人。 -
你使用过Provider吗，你是如何创建商店的，你在哪里有componentWillReceiveProps
-
@ShubhamKhatri 感谢您的回复，我在这条路径上分享了我的整个项目github.com/Husseinoj/reactapi
-
@Carr 谢谢，我在我的 github 上分享了这个项目，当我只调用一个 api 时项目运行良好
-
我检查了项目，
componentWillReceiveProps正在被调用，但我无法解析api，因为它可能指向您的服务器。
标签： javascript reactjs react-native react-redux react-router-redux