Question

对于那些比我有更多Redux经验的人来说，这是一个简单的方法。我提取了一些本地JSON数据，并且Redux似乎没有将其添加到状态中。控制台在数据中记录数组会产生“未定义”。

INDEX.JS

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import store from './components/store/store'
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <Provider store={store()}>
    <App />
  </Provider>, 
  document.getElementById('root')
);

serviceWorker.unregister();

APP.JS

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { bindActionCreators } from 'redux' // new import, see below
import { addDataAction } from './components/actions/addDataAction'

etc...

// these cannot be const otherwise an error occurs
let mapStateToProps, mapDispatchToProps

class App extends Component {

  componentDidMount(){
    this.props.actions.addDataAction() // calling addData on mounting
  }

  render() {
    return (
      <Router>
        <div className="App">
          <div className="wrapper"> 
            <Header />
            <main>
              {console.log(this.props.data.tshirts)}
            </main>
          </div>
          <Footer />
        </div>
      </Router>
    )
  }

  mapStateToProps = state => ({
    data: state.data 
  })

  mapDispatchToProps = dispatch => {
    return {
      actions: bindActionCreators({
      addDataAction
    }, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

REDUCER-addDataReducer.js

const initialState = {
  data: []
};

export default (state = initialState, action) => {
  switch (action.type) {
    case "ADD_JSON_DATA":
      return {
        ...state, // returning state
        data: action.data // updating the data
      };
    default:
      return state;
  }
};

商店-store.js

import { createStore } from "redux"
import addDataReducer from "../reducers/addDataReducer"

function store() {
  return createStore(addDataReducer)
}

export default store

已安装的依赖项：

  "dependencies": {
    "gulp": "^4.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-util": "^3.0.8",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.0.2",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "redux-devtools": "^3.5.0"
  }

JSON：

{
  "tshirts" : [
    {
      "id": 707860,
      "brand": "H&M",
      "name": "T-Shirt",
      "photo": "tshirt.jpg",
      "colors": [
        "red",
        "blue",
        "green",
        "gray"
      ],
      "sizes": [
        "S",
        "M",
        "L",
        "XL"
      ],
      "price": 14,
      "currency": "GBP"
    },
    {
      "id": 43455,
      "brand": "Topman",
      "name": "The Tee Shirt",
      "photo": "tshirt.jpg",
      "colors": [
        "red",
        "blue",
        "green",
        "gray"
      ],
      "sizes": [
        "S",
        "M",
        "L",
        "XL"
      ],
      "price": 14,
      "currency": "GBP"
    }
  ],
  "jumpers" : [
    {
      "id": 653655,
      "brand": "H&M",
      "name": "The J Jumper",
      "photo": "jumper.jpg",
      "colors": [
        "red",
        "blue",
        "green",
        "gray"
      ],
      "sizes": [
        "S",
        "M",
        "L",
        "XL"
      ],
      "price": 24,
      "currency": "GBP"
    },
    {
      "id": 43455,
      "brand": "Topman",
      "name": "Une Jupe",
      "photo": "jumper.jpg",
      "colors": [
        "red",
        "blue",
        "green",
        "gray"
      ],
      "sizes": [
        "S",
        "M",
        "L",
        "XL"
      ],
      "price": 23,
      "currency": "GBP"
    }
  ],
  "trousers" : [
    {
      "id": 645645,
      "brand": "Next",
      "name": "The Trow Sir",
      "photo": "trousers.jpg",
      "colors": [
        "red",
        "blue",
        "green",
        "gray"
      ],
      "sizes": [
        "S",
        "M",
        "L",
        "XL"
      ],
      "price": 24,
      "currency": "GBP"
    },
    {
      "id": 54555,
      "brand": "Topman",
      "name": "Une Trow",
      "photo": "trousers.jpg",
      "colors": [
        "red",
        "blue",
        "green",
        "gray"
      ],
      "sizes": [
        "S",
        "M",
        "L",
        "XL"
      ],
      "price": 23,
      "currency": "GBP"
    }
  ],
  "jackets" : [
    {
      "id": 44344,
      "brand": "Gap",
      "name": "Gap Jacket",
      "photo": "jacket.jpg",
      "colors": [
        "red",
        "blue",
        "green",
        "gray"
      ],
      "sizes": [
        "S",
        "M",
        "L",
        "XL"
      ],
      "price": 24,
      "currency": "GBP"
    },
    {
      "id": 422542,
      "brand": "Gap",
      "name": "Their other jacket",
      "photo": "jacket.jpg",
      "colors": [
        "red",
        "blue",
        "green",
        "gray"
      ],
      "sizes": [
        "S",
        "M",
        "L",
        "XL"
      ],
      "price": 23,
      "currency": "GBP"
    }
  ],
  "suits" : [
    {
      "id": 44344,
      "brand": "Moss Bros",
      "name": "The Three Piece",
      "photo": "suit.jpeg",
      "colors": [
        "red",
        "blue",
        "green",
        "gray"
      ],
      "sizes": [
        "S",
        "M",
        "L",
        "XL"
      ],
      "price": 24,
      "currency": "GBP"
    },
    {
      "id": 422542,
      "brand": "Gap",
      "name": "The Two Piece",
      "photo": "suit.jpeg",
      "colors": [
        "red",
        "blue",
        "green",
        "gray"
      ],
      "sizes": [
        "S",
        "M",
        "L",
        "XL"
      ],
      "price": 23,
      "currency": "GBP"
    }
  ]
}

等等等等-Stackoverflow说我应该添加更多文本。

Answer 1

dispatch函数需要一个对象作为参数，而您要向其传递一个函数。

您需要调度动作的调用，而不是动作创建者本身（将dispatch(addDataAction)替换为dispatch(addDataAction())

const mapDispatchToProps = dispatch => ({
 addDataAction: () => dispatch(addDataAction())
})

Answer 2

REDUCER-addDataReducer.js

为减速器提供初始状态：

Alternate_ProductId

ACTION-addDataAction.js

const initialState = {
 data: []
}

export default (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_JSON_DATA':
      return {
        ...state, // returning state
        data: action.data // updating the data
      }
    default:
      return state;
  }
}

存储-store.js

import clothesData from '../json/clothes.data.json'

    export const addDataAction = () => { // transformed into a function
      return {
      type: 'ADD_JSON_DATA',
      data: clothesData
     }
   }

APP.JS

import { createStore } from "redux"
import addDataReducer from "../reducers/addDataReducer"

function store() {
  return createStore(addDataReducer)
}

export default store

Redux不保存状态

2 个答案: