Can I use dispatch without binding?
I have this code:
Action works and data gets returned correctly.
import axios from 'axios'
export function getBooks(
limit = 10,
start = 0,
order = 'asc'
) {
const req = axios.get(`/api/books?limit=${limit}&skip=${start}&order=${order}`)
.then(res => res.data);
return {
type: 'GET_BOOKS',
payload: req
}
}
In the next file this.props
is empty
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { getBooks } from '../actions'
class HomeContainer extends Component {
constructor(props) {
super(props);
this.props.dispatch(getBooks(3, 0, 'desc'));
}
render() {
console.log(this.props);
return (
<div>
Home Items
</div>
)
}
}
function mapStateToProps(state) {
return {
book_reducer: state.book_reducer
}
}
export default connect(mapStateToProps)(HomeContainer)
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import Routes from './routes';
const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<Routes/>
</BrowserRouter>
</Provider>
, document.getElementById('root'));
book_reducer.js
export default function(state = {}, action) {
switch(action.type) {
case 'Get_BOOKS':
return {...state, list:action.payload}
default: return state;
}
}
Any idea why this does not work?
you made a typo in the reducer
case 'Get_BOOKS':
it should be
case 'GET_BOOKS': this is what you return from the function