Как получить диспетчерскую скидку

Question

Я изучаю редукцию и реагирую. Я следую некоторым учебникам, чтобы сделать приложение.

Я это action:

export function getDueDates(){ 
    return { 
    type: 'getDueDate', 
    todo 
    } 
} 

это магазин:

import { createStore } from 'redux'; 
import duedates from './reducers/duedates' 

export default createStore(duedates) 

Это редуктор:

импорт Неизменное из 'неизменное'

export default (state = Immutable.List(['Code More!']), action) => { 
    switch(action.type) { 
    case 'getDueDate': 
     return state.unshift(action.todo) 
    default: 
     return state 
    } 
} 

и в entry point js у меня есть это:

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

import store from './app/store' 
import { Provider } from 'react-redux' 

import App from './app/Components/AppComponent'; 


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

Теперь (согласно некоторым примерам), я должен позвонить getDueDate из dispatch, но я не понимаю, как получить dispatch на компоненте, чтобы вызвать действие

Answer 1

Использование connect из react-redux пакета. Он имеет две функции в качестве параметров, mapStateToProps и mapDispatchToProps, которые вас интересуют. Согласно ответа от Ник Болл, который частично прав, вы будете экспортировать, как это:

export default connect(mapStateToProps, mapDispatchToProps)(App)

и ваш mapDispatchToProps будет выглядеть примерно так:

function mapDispatchToProps (dispatch, ownProps) { 
    return { 
    getDueDate: dispatch(getDueDate(ownProps.id)) 
    } 
} 

, пока подключен ваш компонент в хранилище есть идентификатор свойства, переданный сверху, вы сможете вызвать this.props.getDueDate() изнутри.

EDIT: Там, вероятно, нет необходимости в использовании в этом случае id, однако моя точка была указать на то, что реквизит пойти в качестве второго параметра :)

Answer 2

Отсутствует деталь здесь connect функция от react-redux. Эта функция «подключит» ваш компонент к хранилищу, предоставив ему метод dispatch. Есть вариации, как именно это сделать, так что я предлагаю читать документацию, но простой способ будет что-то вроде этого:

// app/Components/AppComponent.js 

import { connect } from 'react-redux'; 

export class App extends React.Component { 

    /* ...you regular class stuff */ 

    render() { 

     // todos are available as props here from the `mapStateToProps` 
     const { todos, dispatch } = this.props; 

     return <div> /* ... */ </div>; 
    } 
} 

function mapStateToProps(state) { 
    return { 
     todos: state.todos 
    }; 
} 

// The default export is now the "connected" component 
// You'll be provided the dispatch method as a prop 
export default connect(mapStateToProps)(App);