javascript - 状态未使用 React redux thunk 更新

Question

我对使用 redux 和 React 有点陌生。我正在尝试使用 redux 进行一个简单的 API 调用并让它在 React 中渲染。我可以看到 API 调用在 redux 开发工具的有效负载中工作，但我似乎无法让它更新“connect”中可能的状态。

操作/索引

import FilmAPI from '../api/api';

export const FETCH_FILMS = 'FETCH_FILMS';
export const RECEIVE_FILMS = 'RECEIVE_FILMS';

export const receiveFilms = (films) => {
  return {
    type: RECEIVE_FILMS,
    films
  };
}

    export const fetchFilmsRequest = () => {
  return dispatch => {
    return axios.get('https://www.snagfilms.com/apis/films.json?limit=10')
      .then(response => {
        dispatch(receiveFilms(response.data))
      })
  }
}

export default fetchFilmsRequest;

reducer /FilmReducer

import RECEIVE_FILMS from '../actions/index';

export function films (state = [], action) {
 switch (action.type) {
    case RECEIVE_FILMS:
      return [...state, action.films];
    default:
      return state;
  }
}

reducer /索引

import { combineReducers } from 'redux';
import { films } from './FilmsReducer';

export default combineReducers({
  films,
});

容器/FilmListContainer

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchFilmsRequest } from '../actions';
import FilmList from '../components/FilmList'

class FilmListContainer extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.props.fetchFilmsRequest();
  }

  render() {
    return (
      <div>
        <FilmList films={this.props.films}/>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  films: state.films
})

export default connect(mapStateToProps, {fetchFilmsRequest: fetchFilmsRequest})(FilmListContainer);

configureStore.js

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

export default function configureStore(initialState) {
    const composeEnhancers =
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
            window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
                // options like actionSanitizer, stateSanitizer
            }) : compose;

    const enhancer = composeEnhancers(
        applyMiddleware(thunk)
    );

    return createStore(
        rootReducer,
        initialState,
        enhancer
    );
}

如上所述，Redux DevTools 显示有效负载中的影片，但影片的状态仍保持为 0。谁能指出我正确的方向吗？

Answer 1

您可以通过订阅商店并使用store.getState()来获取更新的状态

步骤:

1. 在组件类的构造函数中编写订阅函数。
2. 通过 store.getState() 设置类的状态。

从“../js/store/index”导入商店；

MyClass 类扩展了组件{

构造函数( Prop ，上下文){

 super(props, context);

 this.state = {

        classVariable: ''

 }
 store.subscribe(() => {

    this.setState({

    classVariable: store.getState().MyStoreState.storeVariable

    });

 });

}

}