Извлечение данных с помощью redux не работает для меня, initialState не изменяется - PullRequest
0 голосов
/ 27 мая 2019

Я запустил свой проект RN без избыточности, и когда я получаю данные (используя formData), он прекрасно работает без избыточности, но я решил включить Redux в свой проект.вот что я сделал:

Я создал две новые папки, одна для действий (файлы констант и файлов), а другая для магазина ведьм содержит папку для редуктора

enter image description here

после этого я создал 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);
  }

это то, что у меня есть

enter image description here

Надеюсь, это было яснодостаточно, даже если он немного длинный

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...