Я собираюсь вызвать api с помощью redux: я использовал axios, history, react-redux, 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 в %cGENERATEOTP_FULFILLED log и api успешно, но проблема %cGENERATEOTP_FULFILLED с componentWillReceiveProps (который больше не работает), который Раньше я получал результат вызова api.
