React Redux 存储将道具传递给 children 的问题

Question

我想要完成的是拥有一个 "controller" 文件，将所有组件呈现到我的页面。我尝试实现 redux 以将道具传递给我的子组件，但我不明白上班。这是我的文件：

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'
import store from './js/store.jsx'
import App from './js/App.jsx'

// Assigning the sections
const nav = document.getElementsByClassName('cart')[0];

//Render the components
ReactDOM.render(<Provider store={store}>
<App />

</Provider>, nav)

App.jsx

import React from 'react'
import Cart from './components/cart/Cart.jsx'

export default class App extends React.Component {
  constructor(props) {
        super(props);
    }

  render() {
    return <Cart />
  }
}

Cart.jsx

import React from 'react'
import { connect } from 'react-redux'
import {fetchCart} from '../../actions/cartActions'
var ReactDOM = require('react-dom');


@connect((store) => {

})
export default class Cart extends React.Component {
    componentWillMount() {
        this.props.dispatch(fetchCart())
    }
    constructor(props) {
        super(props);
         this.state = {

        };

    }

  render() {
    return( <div>

    <div className="cart-scroll-area">
          {/* Bryt ut till egna komponenter */}
          <header className="cart-header"></header>
          <header className="cart-meta">
            <div className="cart-meta-info">
                <div className="cart-timer">Avsluta din order inom<br /><strong>xxxx</strong><br /></div>
                <div className="status ok">
                    för leverans tidigast xxxx
                </div>
            </div>
          </header>
          <section className="cart-section cart-errors"></section>
          <section className="cart-section cart-section-homelist"></section>
          <section className="cart-section cart-section-bag-header"></section>
          <section className="cart-section cart-section-prenumeration"></section>
          <section className="cart-section cart-section-flexbag"></section>
          <section className="cart-section cart-section-recipes"></section>
          <section className="cart-section cart-section-mostbought"></section>
          <section className="cart-section cart-section-accessories"></section>
      </div>
      <div className="cart-scroll-footer">
          <div className="cart-total"></div>
          <div className="cart-total-price"></div>
          <footer className="cart-footer"></footer>
      </div>
      </div>
    )
  }
}

¨

cartActions.js

let restPath = "/ShoppingCart";

export function fetchCart(){
  return {
    type: "FETCH_CART",
    payload: {data:["Event 1", "Event 2"]}
    //payload: axios.get("http://localhost:3000/api/v1/events")
  }
}

cartReducer.js

const initialState = {
  fetching: false,
  fetched: false,
  cart: [],
  error: null
}

export default function reducer(state=initialState, action=null) {
console.log(action.payload)
  switch (action.type){

    case "FETCH_CART_PENDING" : {
      return {...state, fetching:true}
      break;
    }
    case "FETCH_CART_REJECTED" : {
      return {...state, fetching:false, error:action.payload}
      break;
    }
    case "FETCH_CART_FULFILLED" : {
      return {...state,
        fetching:false,
        fetched:true,
        cart:action.payload.data
      }
      break;
    }
    case "FETCH_CART" : {
      return {...state,
        fetching:false,
        fetched:true,
        cart:action.payload.data
      }
      break;
    }
  }
  return state
}

最后是我的 store.jsx

import {applyMiddleware, createStore} from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import reducer from './reducers'

const middleware = applyMiddleware(promise(), thunk, logger())

export default createStore(reducer, middleware)

现在我得到 this.props.dispatch 不是函数。而且我没有得到任何包含 "payload: {data:["Event 1", "Event 2"]}"

的 props/store

谁能帮帮我？ :(

Answer 1

在将您的应用程序连接到 redux 时，您遗漏了一些关键部分。您需要将 redux 连接到您希望访问数据的 react 容器。您还需要创建一个 mapStateToProps 函数，它允许您将 redux 存储中的数据作为 props 进行访问。您还需要创建一个名为 mapDispatchToProps 的函数，以允许您在容器中使用 fetchCart 方法。

首先，您需要从 react-redux 导入 connect。

import {Provider, connect} from 'react-redux'

要将 App 组件连接到 redux，您需要使用 redux connect 方法并传入您创建的两个函数 mapStateToProps、mapDispatchToProps 和 App 组件作为回调。

const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);

然后将 ConnectedApp 放入 ReactDOM.render 函数的 Provider 中。

ReactDOM.render(
<Provider store={store}>
    <ConnectedApp />
</Provider>, nav) 

import {Provider, connect} from 'react-redux'    

 const mapStateToProps = state => ({
    state: state
 })

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

const nav = document.getElementsByClassName('cart')[0];
const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);

//Render the components
ReactDOM.render(
<Provider store={store}>
    <ConnectedApp />
</Provider>, nav)

要使用 redux-logger 您需要执行以下操作

import createLogger from 'redux-logger';
const logger = createLogger();
const middleware = applyMiddleware(thunk, promise, logger);

请注意您传入的顺序 logger 很重要。它需要作为最后一个参数传递给 applyMiddleware。

Answer 2

您对 connect 的用法不正确。您想要将状态和调度程序映射到组件的道具。此外，我建议连接 top-level App 容器并将道具传递给它的 children。尝试这样的事情：

App.jsx

import React from 'react'
import Cart from './components/cart/Cart.jsx'
import {connect} from 'react-redux'
import {fetchCart} from '../../actions/cartActions'

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <Cart
     fetching={this.props.fetching}
     fetched={this.props.fetched}
     cart={this.props.cart}
     error={this.props.error}
     fetchCart={this.props.fetchCart} />
  }
}

const mapStateToProps = (state) => {
  // These will be passed as props into the component.
  return { 
    fetching: state.fetching,
    fetched: state.fetched,
    cart: state.cart,
    error: state.error
  };
};

const mapDispatchToProps = (dispatch) => {
  // These will be passed as props into the component.
  return {
    fetchCart: () => dispatch(fetchCart()) 
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

Cart.jsx

import React from 'react'
import ReactDOM from 'react-dom';

export default class Cart extends React.Component {
  componentWillMount() {
    this.props.fetchCart();
  }

  constructor(props) {
    super(props);
    this.state = { };
  }

  render() {
    // this.props.fetching, this.props.fetched etc. should exist.
    console.log(this.props);

    return(
     <div>
        <div className="cart-scroll-area">
           {/* Bryt ut till egna komponenter */}
           <header className="cart-header"></header>
           <header className="cart-meta">
              <div className="cart-meta-info">
                 <div className="cart-timer">Avsluta din order inom<br /><strong>xxxx</strong><br /></div>
                 <div className="status ok">
                    för leverans tidigast xxxx
                 </div>
              </div>
           </header>
           <section className="cart-section cart-errors"></section>
           <section className="cart-section cart-section-homelist"></section>
           <section className="cart-section cart-section-bag-header"></section>
           <section className="cart-section cart-section-prenumeration"></section>
           <section className="cart-section cart-section-flexbag"></section>
           <section className="cart-section cart-section-recipes"></section>
           <section className="cart-section cart-section-mostbought"></section>
           <section className="cart-section cart-section-accessories"></section>
        </div>
        <div className="cart-scroll-footer">
           <div className="cart-total"></div>
           <div className="cart-total-price"></div>
           <footer className="cart-footer"></footer>
        </div>
     </div>
    )
  }
}

React Redux 存储将道具传递给 children 的问题

Problems with React Redux store passing props to children

javascript

reactjs

redux

react-redux