用的问题做出响应终极版商店道具传递给孩子

Question

我试图做到的是有一个“控制器”的文件，所有的部件呈现出我的网页..我试图实现终极版道具传递给我的组件，但儿童我没有得到它的工作。这里是我的文件：

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"]}"

谁能帮我出任何道具/存储？ :(

Answer 1

你的connect使用是不正确。你想将状态和调度器映射到组件的道具。另外，我建议连接顶级App集装箱和传递道具给它的孩子。尝试是这样的：

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

Answer 2

当您将应用程序连接到REDX时，您缺少一些关键部件您需要将REDX连接到您希望访问数据的react容器，还需要创建一个功能mapStateToProps，它允许你访问了Redux店作为道具的数据，您还需要创建一个名为mapDispatchToProps功能，让你在你的容器使用fetchCart方法。

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

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

要将App组件连接到redux你需要使用了Redux connect方法，并将创建了名为mapStateToProps，mapDispatchToProps两个函数和App组件作为回调。

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

然后你把Provider内ConnectedApp在ReactDOM.render功能。

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。