erikras / erikras/react-redux-universal-hot-example
An action is not dispatching
- 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
Assessment
This issue has not been assessed yet.