Как получить доступ к избыточному состоянию из другого реагирующего компонента?

Question

Я занимаюсь разработкой приложения для статистики лотереи, которое получает данные из CSV, загруженного с входных данных, а затем я хотел прочитать эти данные в хранилище избыточных данных, чтобы я мог использовать его для нескольких компонентов.

Я успешно сохранил данные в хранилище избыточных данных после того, как импортировал файл и прочитал его через заголовок. js и использовал действие, но я не уверен, как получить к нему доступ в других компонентах, таких как, например, Main . js.

Мне кажется, что я все еще не понимаю, как реагировать / редуцировать все вместе. Извините, если об этом уже спрашивали, но все, что я посмотрел в Интернете, я не смог добраться до работы.

// index.js

import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import reducers from "./reducers";

import App from "./components/App";

const store = createStore(reducers, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector("#root")
);

// App.js

import React from "react";

import Header from "./Header";
import Main from "./Main";

const App = () => {
  return (
    <div>
      <Header />
      <Main />
      <div className="numbers-for-draw"></div>
    </div>
  );
};

export default App;

// Header.js

import React from "react";
import { CSVReader } from "react-papaparse";
import { fetchData } from "../actions";
import { connect } from "react-redux";

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.fileInput = React.createRef();
  }

  handleReadCSV = data => {
    this.props.fetchData(data);
    console.log(this.props.data);
  };

  handleOnError = (err, file, inputElem, reason) => {
    console.log(err);
  };

  handleImportOffer = () => {
    this.fileInput.current.click();
    console.log("Got to handleImportOffer");
  };

  render() {
    return (
      <header>
        <CSVReader
          onFileLoaded={this.handleReadCSV}
          inputRef={this.fileInput}
          style={{ display: "none" }}
          onError={this.handleOnError}
        />
        <button onClick={this.handleImportOffer}>Import</button>
      </header>
    );
  }
}

//Map what is in the redux store (e.g. state) to props
const mapStateToProps = state => ({
  data: state.data
});

export default connect(mapStateToProps, {
  fetchData: fetchData
})(Header);

// Main.js

import React from "react";

import { fetchData } from "../actions";
import { connect } from "react-redux";

const Main = () => {
  console.log("In main");
  console.log(this.props.data);  //Blows up here. 
  return <div>Main</div>;
};

//Map what is in the redux store (e.g. state) to props
const mapStateToProps = state => ({
  data: state.data
});

export default connect(mapStateToProps, {
  fetchData: fetchData
})(Main);

// actions/index.js

export const fetchData = data => dispatch => {
  console.log("Action");
  const lottoData = {
    stringNumbers: [
      "one",
      "two",
      "three",
      ...
    ],

    allResults: [],
    winningNumbers: [],
    winningNumbersAsStrings: []
  };

  const localData = data.data;
  localData.shift();

  localData.forEach(line => {
    const lineObject = {
      draw: line[0],
      drawDate: line[1],
      ballOne: line[2],
      ballTwo: line[3],
      ballThree: line[4],
      ballFour: line[5],
      ballFive: line[6],
      ballSix: line[7],
      bonusBall: line[8],
      bonusBall2: line[9],
      powerBall: line[10]
    };

    lottoData.allResults.push(lineObject);

    let nums = [];
    nums.push(parseInt(line[2]));
    nums.push(parseInt(line[3]));
    nums.push(parseInt(line[4]));
    nums.push(parseInt(line[5]));
    nums.push(parseInt(line[6]));
    nums.push(parseInt(line[7]));

    nums.sort((a, b) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {
        return 0;
      }
    });

    lottoData.winningNumbers.push(nums);
    lottoData.winningNumbersAsStrings.push(nums.toString());
  });

  dispatch({ type: "FETCH_DATA", payload: lottoData });
};

// lottoReducer.js

export default (state = {}, action) => {
  switch (action.type) {
    case "FETCH_DATA":
      return action.payload;
    default:
      return state;
  }
};

// reducers/index.js

import { combineReducers } from "redux";
import lottoReducer from "./lottoReducer";

export default combineReducers({
  data: lottoReducer
});

Answer 1

Я не проверял ваш код, но мне кажется, что единственная проблема в вашем Main.js

Пока вы используете функциональный компонент , а не класс, вы не следует использовать this для доступа к вашему реквизиту. Следующее должно работать как ожидалось:

const Main = (props) => {
  console.log("In main");
  console.log(props.data);  
  return <div>Main</div>;
};

//Map what is in the redux store (e.g. state) to props
const mapStateToProps = state => ({
  data: state.data
});

export default connect(mapStateToProps, {
  fetchData: fetchData
})(Main);

Answer 2

В вашем основном. js вы использовали функциональные компоненты, поэтому this.props там не работает. Вы должны передать реквизиты своему компоненту и console.log(props.data).