在React-Redux中抓取和显示单个JSON对象

npm install react react-redux

import React from 'react';
import { connect } from 'react-redux';

// actions.js
export const fetchJsonData = () => {
  return {
    type: 'FETCH_JSON_DATA',
    payload: { /* JSON对象的数据 */ }
  };
};

// reducers.js
const initialState = { /* 初始状态 */ };

export const jsonReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_JSON_DATA':
      return { ...state, json: action.payload };
    default:
      return state;
  }
};

// store.js
import { createStore } from 'redux';
import { jsonReducer } from './reducers';

const store = createStore(jsonReducer);

// App.js
const App = ({ json }) => {
  return (
    <div>
      {/* 显示JSON数据的代码 */}
    </div>
  );
};

const mapStateToProps = state => {
  return {
    json: state.json
  };
};

export default connect(mapStateToProps)(App);

// App.js
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchJsonData } from './actions';

const App = ({ json, fetchJsonData }) => {
  useEffect(() => {
    fetchJsonData();
  }, []);

  return (
    <div>
      {/* 显示JSON数据的代码 */}
    </div>
  );
};

const mapStateToProps = state => {
  return {
    json: state.json
  };
};

export default connect(mapStateToProps, { fetchJsonData })(App);