Question

我在React Redux上遇到了问题。它是一个值得信赖的图书馆吗？现在，当我第一次渲染组件时，调用reducer时不会更新道具。

我的减速器：

import {
  GET_UNITS
} from '../actions/Types';

const INITIAL_STATE = {
  error: false,
  units: {},
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_UNITS:
      console.log('Reducer: '); console.log(action.payload);
      return { ...state, error: false, units: action.payload };
    default:
      return state;
  }
};

我的动作：

import {
  GET_UNITS
} from './Types';

export const getUnits = () => {
  return (dispatch) => {
    const units = {
        "1": "101",
        "2": "102",
        "3": "103",
        "4": "104",
    };
    dispatch({
      type: GET_UNITS,
      payload: units
    });
  };
};

此减速器名称为util。我有多个减速器，所以我创建了一个CombineReducer

import { combineReducers } from 'redux';
import AuthReducer from './Auth';
import Reduc1 from './Tenants';
import Reduce2 from './WorkOrders';
import Util from './Util';

export default combineReducers({
  auth: AuthReducer,
  reduc1: Reduc1,
  reduc2: Reduc2,
  util: Util
});

我的app.js创建商店

import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
...
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

    return (
      <Provider store={store}>
        <AppContainer
          ref={navigatorRef => {
            NavigationService.setTopLevelNavigator(navigatorRef);
          }}
        />
      </Provider>
    );
...

下面是我尝试使用它的组件：

import { connect } from 'react-redux';
import { getUnits } from '../../actions';
...
constructor(props) {
    super(props);
    this.state = {
      selectedUnit: undefined,
      units: {},
    };
  }

  componentDidMount() {
    this.getUnitsAsync();
  }

  getUnitsAsync = async () => {
    await this.props.getUnits();
      console.log('Get Async'); console.log(this.props.units);
    this.setState({
      units: this.props.units
    });
  };
  ...
const mapStateToProps = ({ util }) => {
  const { error, units } = util;

  return { error, units };
};

export default connect(mapStateToProps, {
  getUnits
})(MyComponent);

运行应用程序时，我可以看到日志：

Reducer: 
Object {
  "1": "101",
  "2": "102",
  "3": "103",
  "4": "104",
}
Get Async
Object {}

为什么我的get async方法中的日志未更新道具？如果我单击页面上的任何更新组件的内容，它将起作用并更新this.props.units

谢谢

Answer 1

我思考，尽管很难肯定地说，您的问题出在这里：

await this.props.getUnits();
console.log('Get Async'); console.log(this.props.units);
this.setState({
  units: this.props.units
});

您要获取单位，然后在返回单位时将道具的当前值写入状态。我怀疑您的道具目前尚未更新，因此您要存储一个空对象。

您为什么要使用状态来存储单位而不是直接从道具中使用它们？如果您仅使用道具，则当更新的道具从商店到达时，组件将更新并重新渲染。

但是，如果您确实需要/想要响应更新的道具，则可以将它们编写为以componentDidUpdate之类的生命周期方法声明的状态

React Redux不更新道具第一次页面呈现

1 个答案: