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

Question

What I am trying to accomplish is to have one "controller" file that renders out all the components to my page.. And I tried implementing redux to pass props to my component childrens but I do not get it to work. Here's my files:

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
}

And finally here's my 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)

Right now I am getting this.props.dispatch is not a function. And I do not get any props/store containing the "payload: {data:["Event 1", "Event 2"]}"

Can anyone help me out? :(

Answer 1

You are missing some key parts when it comes to connecting your app to redux. You need to connect redux to the react container you wish to have access to the data. You also need to create a function to mapStateToProps , which allows you access the data in the redux store as props. You also will need to create a function called mapDispatchToProps to allow you use the fetchCart method in your container.

Firstly, you need to import connect from react-redux .

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

To connect the App component to redux you need to use the redux connect method and pass in the two functions you created called mapStateToProps , mapDispatchToProps and the App component as callbacks.

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

You then put the ConnectedApp inside the Provider in the ReactDOM.render function.

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) 

To use the redux-logger you need to do the following

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

Please note the order in which you pass in logger matters. It needs to be passed into applyMiddleware as the final argument.

Answer 2

You're usage of connect is incorrect. You want to map the state and dispatcher to props for the component. In addition, I would suggest connecting the top-level App container and passing props to its children. Try something like this :

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