SanchelliosProg SanchelliosProg - 3 years ago 248
React JSX Question

Redux state is undefined in a mapStateToProps of build-version of application

I've made a quite simple application, which gets cookie from a server, which contains an encrypted quote in a value, and then it sends cookie back to the server and get JSON with decrypted quote. It was made in a case of a training.

The server is written in Go, and runs on localhost:8080.

To prevent my application from CORS I've defined proxy in


"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8080/",
"dependencies": {
"scripts": {

I've skipped some lines here.

The client side, which is ReactJS app is packed up using

Here is the only one and main container of the application:

import React, {Component} from 'react';
import {connect} from 'react-redux'
import * as actions from '../actions';

class App extends Component {
componentWillMount() {

render() {
return (
<div className="container">
<h1>Here is your cookie quote:</h1>
<button onClick={this.props.getCookie}>Update</button>

const mapStateToProps = (state) => {
return {

export default connect(mapStateToProps, actions)(App);

The index.js, which configures the high level of the view options is looking like this:

import React from 'react';
import ReactDOM from 'react-dom';
import reducers from './reducers';
import {Provider} from 'react-redux'
import {createStore, applyMiddleware} from 'redux';
import reduxThunk from 'redux-thunk';
import App from './containers/App';

const store = createStore(reducers, {}, applyMiddleware(reduxThunk));

<Provider store={store}>

Here are the reducers:

import {GET_COOKIE, SET_COOKIE} from "../actions/types";

const initialState = {quote: 'You deserve a cookie'};

export default function (state = initialState, action) {
switch (action.type) {
return {...state, quote: action.payload};
return state;
return state;

Here how it's combined:

import {combineReducers} from 'redux'
import cookie_reducer from "./cookie_reducer";

export default combineReducers({

And here are the actions:

import axios from 'axios';
import {GET_COOKIE} from "./types";

const GET_COOKIE_PATH = '/get_cookie';
const SET_COOKIE_PATH = '/set_cookie';

export const getCookie = () => async dispatch => {
await setCookie();
const res = await axios.get(GET_COOKIE_PATH);
dispatch({type: GET_COOKIE, payload:});

export const setCookie = () => {

This is all for code.

So, what is the problem. When I'm starting my application using
npm start
, everything works fine. We are getting data from server and it is viewed perfectly on the screen.

But when I'm trying to run a build version, the state is not delivered to mapStateToProps() in App.js. According to log it is undefined.

Here are the steps of how I make a build version:

npm run build
serve -s build


Well, I have realized, that I do not get cookies to the browser on a build version. That was a such problem before a solved it with proxy for server, because I've had a CORS.

Answer Source

Well, as far I understand when you do build in CRA you create static assets which you later host. That means there is nothing (like webpack-dev-server in dev mode) to proxy your requests.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download