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

package.json
:

{
"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
create-react-app
CLI-utility.

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() {
console.log('PROPS:',this.props);
this.props.getCookie();
}

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

const mapStateToProps = (state) => {
console.log('STATE',state);
return {
cookieQuote:state.cookie.quote
}
};

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));

ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.querySelector('#root')
);


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) {
case GET_COOKIE:
return {...state, quote: action.payload};
case SET_COOKIE:
return state;
default:
return state;
}
}


Here how it's combined:

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

export default combineReducers({
cookie:cookie_reducer
});


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);
console.log(res);
dispatch({type: GET_COOKIE, payload: res.data.text});
};

export const setCookie = () => {
axios.get(SET_COOKIE_PATH);
};


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





UPDATE



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