React Reduxストアの問題を子どもに渡す問題

Question

私が達成しようとしているのは、すべてのコンポーネントをページにレンダリングする「コントローラ」ファイルを1つ持つことです。私はそれを動作させることはありません。ここに私のファイルがあります：

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 
} 

そして最後に、ここでは、今、私はthis.props.dispatchを取得しています私の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) 

だ関数ではありません。そして、私は小道具/ストアを持っていません"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

あなたのアプリをreduxに接続するには、いくつかの重要な部分がありません。あなたはreactコンテナにreduxを接続する必要があります。また、mapStateToPropsに関数を作成する必要があります。これはあなたが小道具としてReduxのストア内のデータにアクセスすることができます。また、あなたはコンテナにfetchCartメソッドを使用できるようにするmapDispatchToPropsと呼ばれる関数を作成する必要があります。

を第一に、あなたはreact-reduxからconnectをインポートする必要があります。

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

あなたはReduxの connectメソッドを使用して、コールバックとして2つの mapStateToPropsと呼ばれるあなたが作成した関数、 mapDispatchToPropsと Appコンポーネントに渡す必要があり reduxから Appコンポーネントを接続するには

。

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

その後、ReactDOM.render機能にProvider内部ConnectedAppを置きます。

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) 

次

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

を行う必要がありredux-loggerを使用するには、あなたがlogger事項に合格する順番に注意してください。最後の引数としてapplyMiddlewareに渡す必要があります。