We Keep Coding

React-Redux connect isn't getting store from Provider

Im using Redux with React Native to manage state. I believe that I've successfully set up the store and Provider. I can use store.getState() and store.dispatch(action()) from any component successfully, however, the react-redux connect function is not allowing me to access the store from child components. Can you find anything wrong with my code below?
Login.js - This child component I'm testing won't access redux store with react-redux connect.
import React, {Component} from 'react';
import actions from '../../redux/actions';
import {connect} from 'react-redux';
const mapStateToProps = state => {
// To test if this function fires, which it is not
console.log('login state mapping through redux');
return {
state: state,
};
};
const dispatchToProps = dispatch => {
return {
userRecieved: (user) => dispatch(actions.userRecieved(user)),
};
};
export class Login extends Component {
constructor(){
super();
this.state = {
credentials: {
email: '',
password: '',
},
};
}
componentDidMount(){
// This will show whether redux is connected
console.log(this.props.state);
this.props.userRecieved('TEST USER');
}
render() {
return ( <Text>{this.props.state}</Text> );
}
}
export default connect(mapStateToProps, dispatchToProps)(Login);
App.js
import React, {Component} from 'react';
import YEET from './src/YEET.js';
import store from './src/redux/stores/index';
import {Provider} from 'react-redux';
export default class App extends Component {
render() {
return (
<Provider store={store}>
<YEET />
</Provider>
);
}
}
My Redux Files:
store.js
import { combineReducers, createStore} from 'redux';
import accountReducer from '../reducers/accountReducer';
import postReducer from '../reducers/postReducer';
const initialState = {};
const reducers = combineReducers({
account: accountReducer,
post: postReducer,
});
const store = createStore(reducers, initialState);
export default store;
actions.js
import constants from '../constants';
var userRecieved = user => ({
type: constants.USER_RECIEVED,
data: user,
});
export default {
userRecieved,
};
accountReducer.js
import constants from '../constants';
var initialState = {
user: {
photos: [],
},
};
export default (state = initialState, action ) => {
let newState = Object.assign({}, state);
switch (action.type) {
case constants.USER_RECIEVED:
const user = {
id: action.data.uid,
// photos: action.data,
};
console.log(action);
newState.user = user;
return newState;
default:
return state;
}
};

From what I see, the only reason could be that you're importing the unconnected component.
When you import the Login component, make sure that you import the default export instead of the named export.
So, wherever you import the Login component, do it like this:
import Login from 'your-login-component-location/Login'
instead of
import { Login } from 'your-login-component-location/Login'
The second one is a named export, which will return the Login class directly.
The first one is the default export, which will return the connected component.

Redux on React Native not able to render from reducer

I am new to redux and it might be some silly error. I am trying to make an Api call in Action and pass the data to the Reducer. I can see the data passed correctly in the reducer with action.data. I think the problem is in mapStateToProps in the component therefore I am not able to pass the state and render the component. Please find below action - reducers - store.js - home.js
ACTION.JS
export const DATA_AVAILABLE = 'DATA_AVAILABLE';
export function getData(){
return (dispatch) => {
//Make API Call
fetch("MY API URL").then((response) => {
return response.json();
}).then((data) => {
var data = data.articles;
console.log(data)
dispatch({type: DATA_AVAILABLE, data:data});
})
};
}
this is Reducers.JS
import { combineReducers } from 'redux';
import { DATA_AVAILABLE } from "../actions/" //Import the actions types constant we defined in our actions
let dataState = {
data: [],
loading:true
};
const dataReducer = (state = dataState, action) => {
switch (action.type) {
case DATA_AVAILABLE:
state = Object.assign({}, state, {
data: [
...action.data //update current state data reference
],
loading: false
});
console.log(action.data);
return state;
default:
return state;
}
};
// Combine all the reducers
const rootReducer = combineReducers({
dataReducer
// ,[ANOTHER REDUCER], [ANOTHER REDUCER] ....
})
export default rootReducer;
this is Store.js with Redux-thunk
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../app/reducers/index'; //Import the reducer
// Connect our store to the reducers
export default createStore(reducers, applyMiddleware(thunk));
and finally home.js component when I need to pass the new state and render it
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
FlatList,
View,
Text,
ActivityIndicator
} from 'react-native';
import {bindActionCreators} from 'redux';
import { connect } from 'react-redux';
import * as Actions from '../actions'; //Import your actions
class Home extends Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount() {
this.props.getData(); //call our action
}
render() {
if (this.props.loading) {
return (
<View style={styles.activityIndicatorContainer}>
<ActivityIndicator animating={true}/>
</View>
);
} else {
console.log(this.state)
return (
<View style={styles.row}>
<Text style={styles.title}>
{this.props.data}
fomrmo
</Text>
<Text style={styles.description}>
</Text>
</View>
);
}
}
};
// The function takes data from the app current state,
// and insert/links it into the props of our component.
// This function makes Redux know that this component needs to be passed a piece of the state
function mapStateToProps(state, props) {
return {
loading: state.dataReducer.loading,
data: state.dataReducer.data
}
}
// Doing this merges our actions into the component’s props,
// while wrapping them in dispatch() so that they immediately dispatch an Action.
// Just by doing this, we will have access to the actions defined in out actions file (action/home.js)
function mapDispatchToProps(dispatch) {
return bindActionCreators(Actions, dispatch);
}
//Connect everything
export default connect(mapStateToProps, mapDispatchToProps)(Home);

Assuming that:
case DATA_AVAILABLE:
console.log(action.data.length)
will console.log something more than 0
change your reducer action:
const dataReducer = (state = dataState, action) => {
switch (action.type) {
case DATA_AVAILABLE:
return {
...state,
data: action.data,
loading: false
});
default:
return state;
}
};
To address:
Objects are not valid as a React child(found objects with Keys
{source, author, title, description, url })
that's because you try to render Object:
{this.props.data}
but if you do:
{
this.props.data.map((el, i) =>
<p key={i}>Element nr {i}</p>
)
}
It should work.

How to get access to a specific reducer variables as props from react without using routes

I'm developing a react-redux app and I can get access to the reducers via routes. Now I'm facing the trouble of getting access to a specific reducer without using routes.
Here is my reducers.js:
const initialState = {
loading: false,
topics: []
};
export default createReducer(initialState, {
[LOADING_DATA]: (state, action) => {
return Object.assign({}, state, {
loading: action.loading
});
}
});
This is my actions.js:
export function loading (loading) {
return {
type: LOADING_DATA,
payload: {loading}
};
}
And this is what I have on my component:
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux';
import * as moduleActionCreators from '...';
import * as actionCreators from '...';
class MyComponent extends Component {
...
render () {
return (<div>
...
</div>;
}
}
const mapStateToProps = (state) => ({
});
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators(Object.assign({}, moduleActionCreators, actionCreators), dispatch)
});
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
Normally in the mapStateToProps I reference the reducer variables as loading: state['my_reference_to_reducer'].loading but I can't figure it out how to tell the component to reference my reducers.js in order to get loading as props.
I would appreciate a light on this.

You need to set up the state in mapStateToProps function in order to access it:
const mapStateToProps = (state) => {
return {
loading: state.loading
}
}
Then you should be able to use it as this.props.loading in MyComponent.
Your reducer can look like this:
export default function reducer(state = {}, action) {
switch(action.type) {
case 'LOADING_DATA':
return Object.assign({}, state, {
...state,
loading: action.payload.loading
})
I recommend you to use redux ducks pattern as it keeps action creators and reducers at the same file, saves you time and makes it easier to read and use. For example:
loading.js
// Actions
const LOADING_DATA = 'LOADING_DATA'
// Action Creators
export const loadingData = (data) => {
return {
type: LOADING_DATA,
payload: {
loading: data
}
}
}
// Reducer
export default function reducer(state = {
loading: 'DATA zeroed'
}, action) {
switch(action.type) {
case 'LOADING_DATA':
return Object.assign({}, state, {
...state,
loading: action.payload.loading
})
default:
return state
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import configureStore from './configureStore'
const store = configureStore()
ReactDOM.render(
<MyComponent store={store}/>,
document.getElementById('root')
);
configureStore.js
import { createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import loadingData from './loading'
const configureStore = () => {
return createStore(loadingData, composeWithDevTools())
}
export default configureStore
MyComponent.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { loadingData } from './loading';
class MyComponent extends Component {
constructor(props){
super(props)
this.onLoadingData = this.onLoadingData.bind(this)
}
componentDidMount() {
this.props.loadingData('no more undefined')
}
onLoadingData() {
this.props.loadingData('DATA')
}
render() {
console.log(this.props.loading)
return (
<div>
<h2>MyComponent</h2>
<button onClick={this.onLoadingData}>Load Data</button>
<p>{this.props.loading}</p>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
loading: state.loading
}
}
const mapDispatchToProps = {
loadingData
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(MyComponent)

React-redux action is not defined

I'm trying to call an API with redux action
but everytime I call it in my componentDidMount function, it gives me an error stating that my function is not defined.. i'm so confused, I've been using my past redux project as reference and it's using the same method but it works.
Have a look at my codes
Reducer
import * as types from '../actions/actionconst';
const initialState = {
isfetching: false,
categories: [],
error: null
}
const categoryReducer = (state = initialState, action) => {
switch(action.type){
case types.FETCH_CATEGORIES:
console.log('in fetch categories');
state = {
...state,
isfetching: true,
categories: action.payload
}
break;
case types.FETCH_CATEGORIES_SUCCESS:
state ={...state, categories: action.payload, isfetching: false}
break;
case types.FETCH_CATEGORIES_ERROR:
state = {...state, isfetching: false, error: action.payload}
}
return state;
}
export default categoryReducer
Action
import * as types from './actionconst';
import categoryAPI from '../api/categoryAPI';
export function getCategory(){
return {dispatch => {
fetch("http://localhost:8000/api/v1/categories")
.then((response) => response.json())
.then((responseData) => {
dispatch({
type: types.FETCH_CATEGORIES
payload: responseData
})
})
.catch((err) => {
dispatch({type: types.FETCH_CATEGORIES_ERROR, payload: err});
})
}}
}
Container
import React, {Component} from 'react';
import {connect} from 'react-redux';
import Category from '../components/category';
class CategoryContainer extends Component{
constructor(props){
super(props);
console.log('category props', this.props);
}
componentDidMount(){
console.log('masuk CDM');
this.props.fetchCategory()
}
render(){
var viewtypequery = window.innerWidth >= 1025 ? "computers" : "mobile"
return(
<Category alphabets={this.state.alph}
categorylist={this.state.categoriestemp}
view={viewtypequery}
active={this.state.isActive}
/>
)
}
}
const mapStateToProps = (state) => {
console.log('state is', state);
return{
categories: state.category
}
}
const mapDispatchToProps = (dispatch) => {
return{
fetchCategory: () => {
console.log('cuk ta');
dispatch(getCategory())
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(CategoryContainer)
I dont know if I miss something, It's been a while since I touch this project, been rewatching redux tutorial but I still couldn't find any solutions..

I don't see you importing your getCategory action in your component. I would generally write it like that:
import { getCategory } from '../path-to-action';
.......
export default connect(mapStateToProps, {getCategory})(CategoryContainer)
and then use it directly in the componentDidMount lifecycle method:
componentDidMount(){
this.props.getCategory()
}

Hi Arga try to use bindActionCreators from redux. Make changes in your code to
import React, {Component} from 'react';
import {connect} from 'react-redux';
import Category from '../components/category';
import CategoryActions from '../actions/category'; // notice this will be your category actions file
class CategoryContainer extends Component{
constructor(props){
super(props);
console.log('category props', this.props);
}
componentDidMount(){
console.log('masuk CDM');
this.props.getCategory(); // change here we call function from props binded to category component, this function is defined in your actions file
}
render(){
var viewtypequery = window.innerWidth >= 1025 ? "computers" : "mobile"
return(
<Category alphabets={this.state.alph}
categorylist={this.state.categoriestemp}
view={viewtypequery}
active={this.state.isActive}
/>
)
}
}
const mapStateToProps = (state) => {
console.log('state is', state);
return{
categories: state.category
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators(CategoryActions, dispatch) // notice change here we use bindActionCreators from redux to bind our actions to the component
}
export default connect(mapStateToProps, mapDispatchToProps)(CategoryContainer)
Hopefully it helps.

Redux - application state has the name of reducer as key

Could someone please help me with this problem?
I've started to learn React and Redux but I'm stuck from a couple of days on configuring redux.
I'm assuming that when something triggers an action, redux through the reducers stack of functions should return an object that represents my application state.
Unfortunately, It returns an object with { reducerName => reducer result } basically means that if I've 4 reducers, the function store.getState() returns something like
{
'reducerOne': entireApplicationState
'reducerTwo': entireApplicationState
'reducerThree': entireApplicationState
'reducerFour': entireApplicationState
}
I'll really appreciate if someone can help me because I've finished all the ideas :)
This is my application.js:
import React from 'react';
import ReactDom from 'react-dom';
import HomePage from 'root_views/home';
import {store} from 'root_services/redux/store';
class Application extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<HomePage/>
)
}
}
var Provider = React.createClass({
childContextTypes: {
store: React.PropTypes.object.isRequired
},
getChildContext: function () {
return {store: this.props.store}
},
render: function () {
return this.props.children;
}
});
ReactDom.render(
<Provider store={store}>
<Application/>
</Provider>,
document.getElementById('application')
);
My store.js
import { createStore } from 'redux';
import {rootReducer} from './reducers/container';
export const store = createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
My container.js that basically contains all my reducers
import {combineReducers} from 'redux';
// This is just the action label
import {DATA_EXCHANGE_LOAD} from 'root_services/redux/actions/container'
const initialState = {
data_exchange: {},
}
function dataExchange(state = {}, action) {
switch (action.type) {
case DATA_EXCHANGE_LOAD:
return Object.assign({}, state, {
data_exchange:{'reducerOne':'dataExchange'}
});
break;
default:
return initialState;
break;
}
};
function testReducer(state = {}, action) {
switch (action.type) {
case DATA_EXCHANGE_LOAD:
return Object.assign({}, state, {
data_exchange:{'reducerTwo':'testReducer'}
});
break;
default:
return initialState;
break;
}
};
// Export the combined reducers
export const rootReducer = combineReducers({
dataExchange,
testReducer
});
This is the action that triggers the event:
export function dataExchangeLoad(){
return {
type: DATA_EXCHANGE_LOAD,
}
};
This is my component where the action is triggered:
import React from 'react'
import "../components/layouts/header/header.less";
import {dataExchangeLoad} from "root_services/redux/actions/container"
export default class HomePage extends React.Component {
constructor(props, {store}) {
super(props);
store.dispatch(dataExchangeLoad());
console.log(store.getState());
}
render() {
return (
<div>
<h1>test</h1>
</div>
)
}
};
HomePage.contextTypes = {
store: React.PropTypes.object,
}
This is the result:
Object {dataExchange: Object, testReducer: Object}

As was already answered in comments combineReducers indeed works that way. In case you want to chain reducers so that action will go through all of them sequentially updating state in each one you can use reduce-reducers. Using this helper function it's possible to do something like that (looks like that is what you want to achieve):
import reduceReducers from 'reduce-reducers';
const reducer1 = (state = {}, action) => {
if (action.type === 'foo') {
return ({
...state,
touchedBy: ['reducer1'],
})
}
return state;
};
const reducer2 = (state = {}, action) => {
if (action.type === 'foo') {
return ({
...state,
touchedBy: state.touchedBy.concat('reducer2'),
})
}
return state;
};
const reducer = reduceReducers(reducer1, reducer2);
expect(reducer({}, { type: 'foo' }))
.toMatchObject({ touchedBy: ['reducer1', 'reducer2'] });

In case anyone is looking, the link provided above in the comments is broken. This link works and explains well how to rename the state coming from your reducers. If you don't want to read, rename your reducer import or rename it inside your combineReducer.
Example1:
import billReducer as billState from "./reducers";
Example2:
const rootReducer = combineReducer({billState: billReducer});
Using combineReducers