javascript - 无法从 redux store 中取出数据

Question

我可以从网站扩展中看到 redux 状态下我想要的所有数据，但是，当我想将其拉出以在我的组件中使用它时，它说 this.props.rules 未定义:
这是 create-store.js:

import {createStore, applyMiddleware} from 'redux';
import mainReducer from './reducers/main-reducer';
import {composeWithDevTools} from 'redux-devtools-extension';
import thunk from 'redux-thunk';

export default () => {
  return createStore(mainReducer, composeWithDevTools(
    applyMiddleware(thunk)
  ))
}

这是 mainReducer.js

import {combineReducers} from 'redux';

import rules from './rules-reducer';

export default combineReducers({
  rules
});

这是规则 reducer :

const initialState = {
  allRules: [],
  singleRule: {}
}

export default (state = {}, {type, payload}) => {
  switch(type){
    case 'GET_RULES':
      console.log('got in get_rules reducer');
      return {
        ...state,
        allRules: payload
      }
    default:
      return state;
      }

};

这是 getRulesAction:

export const getRulesAction = () => dispatch => {
  console.log('got into getrulesaction');
  const sheets = Object.entries(document.styleSheets);
  let allRules = [];
  for(let i = 0; i < sheets.length; i++){
    const sheet = sheets[i][1];
    const rules = Object.entries(sheet.cssRules);
    for(let j = 0; j < rules.length; j++){
      // console.log(rules[j][1].cssText);
      allRules.push(rules[j][1].cssText);
    }  
  }
  dispatch({
    type: 'GET_RULES',
    payload: allRules
  })
  
};

这是我想显示我的数据的组件:

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {getRulesAction} from '../actions/ruleActions';

class Rules extends Component {
  componentWillMount() {
    this.props.getRulesAction();
    console.log('props from will mount', this.props);
  }

  render(){
    console.log(this.props.rules);
    const fetchedRules = this.props.rules.map((rule,i) => {
        return <li key={i}>{rule}</li>
    }
    )

    return(
      <div>
        <h2>Component to get rules from the redux store</h2>
        {fetchedRules}
      </div>
    );
  }

}

Rules.propTypes = {
  getRulesAction: PropTypes.func.isRequired,
  rules: PropTypes.array.isRequired,
}

const mapStateToProps = state => ({
  rules: state.rules.allRules
})

export default connect(mapStateToProps, {getRulesAction})(Rules);

Answer 1

错误很可能是由于以下原因。声明状态时，需要初始化状态 Prop 。您可以通过在 reducer 第一次运行时将默认状态传递给它来实现这一点。但是，您的默认状态设置为空对象:

export default (state = {}, {type, payload})

因此，当组件第一次渲染时， this.props.rules未定义。
为了解决这个问题，你需要用 initialState 来初始化状态。 ，这将确保 this.props.rules而是一个数组。

export default (state = initilState, {type, payload})

稍后，当 Action 被触发时，结果将从更新的状态中拉出。