erikras / erikras/react-redux-universal-hot-example

An action is not dispatching

Open
#1,393 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.1k
Forks
2.5k
PR merge metrics
No merged PRs in 30d

Description

Hi all !!! I've created a new redux module called portfolio.js, here is the content of the module:

```
const INCREMENTPORTFOLIO = 'redux-example/portfolio/INCREMENTPORTFOLIO';
const LOAD = 'redux-example/portfolio/LOAD';
const LOAD_SUCCESS = 'redux-example/portfolio/LOAD_SUCCESS';
const LOAD_FAIL = 'redux-example/portfolio/LOAD_FAIL';
const INCLIKE = 'redux-example/portfolio/INCLIKE';

const initialState = {
counter: 74,
loaded: false,
list: []
};

export default function portfolio(state = initialState, action = {}) {
switch (action.type) {
case LOAD:
return {
...state,
loading: true
};
case LOAD_SUCCESS:
return {
...state,
loading: false,
loaded: true,
list: action.result
};
case LOAD_FAIL:
return {
...state,
loading: false,
loaded: false,
error: action.error
};
case INCLIKE:
return state;
case INCREMENTPORTFOLIO:
const {counter} = state;
return {
...state,
counter: counter + 1
};
default:
return state;
}
}

export function incrementportfolio() {
return {
type: INCREMENTPORTFOLIO
};
}

export function isLoaded(globalState) {
return globalState.portfolio && globalState.portfolio.loaded;
}

export function load() {
return {
types: [LOAD, LOAD_SUCCESS, LOAD_FAIL],
promise: (client) => client.get('/loadPortfolio')
};
}

export function inclike(index) {
return {
type: INCLIKE,
payload: {
index: index
}
};
}

```
then I have included it properly in reducer.js inside redux/modules and then I have created a component called PorfolioList.js with this code:

```
import React, {Component, PropTypes} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {incrementportfolio} from 'redux/modules/portfolio';

@connect(
state => ({counter: state.portfolio.counter}),
dispatch => bindActionCreators({incrementportfolio}, dispatch))
export default class PortfolioList extends Component {
static propTypes = {
counter: PropTypes.number,
incrementportfolio: PropTypes.func.isRequired
}

render() {
const {counter} = this.props;
return (

You have clicked me {counter} time{counter === 1 ? '' : 's'}.

);
}
}

```
I have included this component properly in components/index.js and here comes the issue, the component is rendered well in the page and the button shows the initial value but the onclick doesn't fires the action. In redux dev tools I dispatch manually the action and the state is modified correctly. Why the onclick of the button is not firing the action ? Can you help me please ??

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.