Как правильно подключать reducer и action для ReactJS?

Question

[Ninja Mate]

Нужна помощь в понимании того как все это работает.
Приложение node, reactjs, react router 4 серверное.
index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'

import configureStore from './store'
import './index.css'
import App from './containers/App'

// Let the reducers handle initial state
const initialState = {}
const store = configureStore(initialState)

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

App.js

export default class App extends Component {
  render(){
    return (
      <div>
        <h1>v0.0.1</h1>
        <Switch>
          <Route exact path="/" component={FirstPage}/>
          <Route path="/second" component={Test}/>
          <Route component={NoMatch}/>
        </Switch>
      </div>
    )
  }
}

App.js, FirstPage, Test компоненты HOC.
Дальше в них нужно вызвать initialState, props задать и функции, которые actions к событиям привязать
Дальше все будет для Test
Правильно ли я задаю state?
int получаю из reducer

const initialState = {
  int: 0
}

export default function reducer(state=initialState, action) {
    switch (action.type) {
        case 'INCRE_TEST':
            return action.int++
        default:
            return state
    }

}

У меня проблема как работать с
actions
не получается в Test.js потом вызвать

export const INCRE_TEST = 'INCRE_TEST'

export function increTest(int) {
    return {
        type: INCRE_TEST,
        int
    }
}

И тут самое непонятное, как все это правильно собирать?
Не понимаю как подключить функцию к onClick
Test.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
//import { bindActionCreators } from 'redux'

import {increTest} from '../actions/test'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'

class Test extends Component {
    render(){
        return (
        <div>
            <Link to={'/'}><button>first Router</button></Link>
            {this.props.int}
???как использовать эту функцию
            <button onClick={this.props.onClick}>Click onClick</button>
        </div>
        )
    }
}

Test.propTypes = {
    onClick: PropTypes.func.isRequired,
    int: PropTypes.number.isRequired
}
//const onClick = int => dispatch(increTest(int))

export const mapStateToProps = state => {
    return {
        int: state.test.int
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onClick: int => {
            dispatch(increTest(int))
        }
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Test)

Answer 1

[Никита Гущин]

Для начала: не совсем понятно, что вы хотите инкрементить. В добавок вы мутируете объект action... Лучше сделать как-нибудь так:

export default function reducer(state=initialState, action) {
    switch (action.type) {
        case 'INCRE_TEST':
            return state.int + action.int
        default:
            return state
    }

}

И тут самое непонятное, как все это правильно собирать?
Не понимаю как подключить функцию к onClick

У вас все верно сделано, за исключением параметра функции

const mapDispatchToProps = dispatch => {
    return {
        onClick: int => {
            dispatch(increTest(int))
        }
    }
}

Получается, что в качестве параметра int у вас будет event. Можно просто передавать какое-то число:

const mapDispatchToProps = dispatch => {
    return {
        onClick: () => {
            dispatch(increTest(1))
        }
    }
}

А если хотите сделать именно с параметром, то передавайте его в обработчике клика:

<button onClick={() => this.props.onClick(1)}>Click onClick</button>

Это самый наглядный вариант, только негативно влияет на производительность, поэтому в реальных проектах не стоит так делать (нужно создать в классе Test отдельный метод, скажем, handleClick, в котором вызывать this.props.onClick(1) и уже его передавать в onClick кнопки)

Comments

[Ninja Mate]

спасибо. а в чем преимущество делать еще одну обертку вокруг this.props.onClick(1)? экономим на рендере каждый раз не подключая? мне в дальнейшем бутен важна скорость работы, и методов таких будут сотни. хотел их все как объекты передавать testActions.action.

[Ninja Mate]

еще у меня вопрос по actions. в чем их смысл я так и не понял. получается, что редюсер это switch для которого нужно регистрировать actions? или его можно отдельно использовать без actions? если мне нужно сделать функцию которая большая и сложная, мне ее нужно подключать к actions (если да то как, там вроде только объект описываем и константу декларируем) или к reducer и на return ее ставить?

[Никита Гущин]

Ninja Mate:

спасибо. а в чем преимущество делать еще одну обертку вокруг this.props.onClick(1)

Вы создаете при каждом рендере новую функицю, а это приводит к: потреблению памяти, частому вызову сборщика мусора, ререндеру компонента, в который вы передаете этот обработчик. Одни минусы :)

еще у меня вопрос по actions. в чем их смысл я так и не понял. получается

Попробуйте это прочитать - Объясните простыми словами как работает Redux? .. может станет понятнее. В целом - редьюсер описывает изменение состояния в ответ на какое-либо событие. Экшен - описывает событие. Один экшен может быть обработан во многих редьюсерах, также может быть не обработан нигде.

Если в вашем приложении что-то произошло и нужно изменить состояние - создаете соответствующий экшен и диспатчите его...