Не удается получить данные из хранилища redux - PullRequest
Новая
       7

Не удается получить данные из хранилища redux

2 голосов
/ 14 июля 2020

Я могу видеть все данные, которые мне нужны в состоянии 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
});

Вот редуктор правил: 

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);

введите описание изображения здесь

1 Ответ

2 голосов
/ 14 июля 2020

Ошибка, скорее всего, связана со следующим. Когда вы объявляете состояние, вам необходимо инициализировать свойства состояния. Вы делаете это, передавая редуктору состояние по умолчанию при его первом запуске. Однако ваше состояние по умолчанию установлено на пустой объект: 

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

Следовательно, когда компонент отрисовывается в первый раз, this.props.rules не определено. Чтобы исправить это, вам нужно инициализировать состояние с помощью initialState, что обеспечит вместо этого this.props.rules массив. 

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

Позже, когда действие будет запущено, результатом будет вытащил из обновленного состояния.

...