Я запустил свой проект RN без избыточности, и когда я получаю данные (используя formData), он прекрасно работает без избыточности, но я решил включить Redux в свой проект.вот что я сделал:
Я создал две новые папки, одна для действий (файлы констант и файлов), а другая для магазина ведьм содержит папку для редуктора
после этого я создал 3 таких действия: getScoreList, getScoreListSuccess, getScoreListFailure
function getScoreListSuccess(data) {
return {
type: FETCHING_SCORE_LIST_SUCCESS,
data: data
}
}
в том же файле, который я создал, для извлечения данных с использованием async await и formData:
import FormData from 'FormData';
const formData = new FormData()
formData.append('userId', '1');
formData.append('key', 'XXXXXXXXX');
export const getScoreFromAPI = () => {
return async dispatch => {
dispatch(getScoreList());
try {
let res = await fetch('https://www.***.com/***/***/***.php', {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
},
body: formData,
})
let json = await res.json();
dispatch(getScoreListSuccess(json));
} catch (err) {
console.log("the error is: " + error)
}
};
};
Затем я установил свой редуктор на 3 случая:
import {FETCHING_SCORE_LIST, FETCHING_SCORE_LIST_SUCCESS, FETCHING_SCORE_LIST_FAILURE} from '../../actions/constants'
const initialState = {
scoreList: [],
isFetching: false,
error: false,
}
export default function getScoreList(state = initialState, action) {
switch (action.type) {
case FETCHING_SCORE_LIST:
return {
...state,
isFetching: true,
scoreList: [],
};
case FETCHING_SCORE_LIST_SUCCESS:
return {
...state,
isFetching: false,
scoreList: action.data,
};
case FETCHING_SCORE_LIST_SUCCESS:
return {
...state,
isFetching: false,
error: true,
};
default:
return state;
}
};
и в другом файле (index.js) это то, что я сделал:
import {combineReducers} from 'redux'
import getScoreList from './scoreListReducer'
const rootReducer = combineReducers({
getScoreListS: getScoreList,
})
export default rootReducer
, затем я создалмой магазин с промежуточным программным обеспечением thunk в файле configStore.js
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './Reducers/index'
export default function configureStore() {
let store = createStore(rootReducer, applyMiddleware(thunk))
return store
}
файл app.js:
...
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './Store/Reducers/index'
const createStoreWithMW = applyMiddleware(thunk)(createStore);
const store = createStoreWithMW(rootReducer);
export default class App extends Component<Props> {
render() {
return (
<Provider store={store}>
<Navigation/>
</Provider>
);
}
}
И, наконец, я подключил свой компонент с помощью redux:
...
import { connect } from 'react-redux';
import {getScoreFromAPI} from '../../actions/actions';
import { bindActionCreators } from 'redux';
...
function mapStateToProps(state) {
return{
scoreListState: state.getScoreListS,
};
}
const mapDispatchToProps = dispatch => bindActionCreators({
fetchScoreList: getScoreFromAPI
}, dispatch)
export default connect(
mapStateToProps,
mapDispatchToProps
)(ScoreList);
чтобы проверить это я console.warn ScoreListState:
componentDidMount() {
console.warn(this.props.scoreListState);
}
это то, что у меня есть
Надеюсь, это было яснодостаточно, даже если он немного длинный