I’m creating a really simple project in Codepen using React-Redux. Currently, it’s not working as my react components seem like they can’t even access the properties passed in using the Redux connect function. I can’t seem to find what I’m doing wrong.
//When completed, this project should have a text field and a button. When the button is pressed, a number is added to the text field, with each subsequent number being 1 greater than the last. Currently: Some sort of error where I can't access this.props.nums (my list of numbers) inside my react components. Does this mean my React and Redux code isn't connected properly?
//Import modules, initialize Provider and connect objects
const { Provider, connect } = ReactRedux;
const { applyMiddleware, createStore, combineReducers, bindActionCreators } = Redux;
//constants that corresponding to action types
const ADD_NUM = "addNum";
//action creator that returns type addnum and the number
let addNum = (num) => {
return {
type: ADD_NUM
};
}
//the reducer that handles the add
let addReducer = (state = {num: 0, nums: [0]}, action) => {
switch(action.type){
case ADD_NUM:
return {num: state.num + 1, nums: state.nums.concat(state.num)};
//CHANGE THIS
default:
return state;
}
}
//combined reducer here
const rootReducer = combineReducers({
add: addReducer
});
//create store
let store = createStore(rootReducer);
//define first component, a button
class ReduxButton extends React.Component {
onClick(e) {
e.preventDefault();
this.props.addNum(this.props.num);
//it seems that no props are being passed into the react component from the console logging
console.log(this.props.nums, this.props.num);
console.log(store.getState());
}
render(){
console.log(this.props.nums);
return (
<div>
<button onClick={this.onClick.bind(this)}>
Add next number
</button>
</div>
);
}
}
//second function displays the numbers
class ReduxTextField extends React.Component {
renderList(){
return this.props.nums.map((num) => <li key={num}>{num}</li>);
//it seems that the above code doesn't work, and this.props.nums isn't even defined???
}
render(){
return (
<ol type="I">{this.renderList()}</ol>
);
}
}
//map state message to property of the component
let mapStateToProps = function(state) {
return {num: state.num, nums: state.nums};
}
//map dispatch functions in redux to react component props
let mapDispatchToProps = (dispatch) => {
return {
addNum: (num) => {
dispatch(addNum(num));
}
};
}
//use connect to use the map functions and connection react to redux
const ReduxButtonContainer = connect(mapStateToProps, mapDispatchToProps)(ReduxButton);
const ReduxTextFieldContainer = connect(mapStateToProps, mapDispatchToProps)(ReduxTextField);
//Create the ultimate app component, containing the button and text
class App extends React.Component {
render() {
return (
<div>
<ReduxTextFieldContainer />
<ReduxButtonContainer />
</div>
);
}
}
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
console.log(store.getState());