Been using this boilerplate for a while and have been using plain JS objects as the store/state up until I started getting some odd mutations randomly so decided to switch to Immutable.js. Currently I'm trying to implement redux-immutable into my code. I'm having some issue with react-router-redux and redux-immutable; unfortunately I don't know these libraries very well 'under-the-hood' so having a lot of trouble debugging this. I have followed the instructions in the redux-immutable README on this.
Getting this error in my index.js file.
Uncaught TypeError: Cannot read property 'toJS' of undefined
index.js
const initialState = Immutable.Map({});
const store = configureStore(initialState);
const history = syncHistoryWithStore(hashHistory, store, {
selectLocationState (state) {
return state.getIn([
'route',
'location'
]).toJS();
}
});
render(
<Provider store={store}>
<Router history={history} routes={routes} />
</Provider>,
document.getElementById('root')
);
configureStore.js
const router = routerMiddleware(hashHistory);
const enhancer = compose(
applyMiddleware(thunk, router, logger),
DevTools.instrument(),
persistState(
window.location.href.match(
/[?&]debug_session=([^&]+)\b/
)
)
);
export default function configureStore(initialState) {
const store = createStore(rootReducer, initialState, enhancer);
if (module.hot) {
module.hot.accept('../reducers', () =>
store.replaceReducer(require('../reducers'))
);
}
return store;
}
rootReducer.js
import {combineReducers} from 'redux-immutable';
import routing from './Routing';
import Graphing from './Graphing';
import Syncing from './Syncing';
import Navigating from './Navigating';
import Notifying from './Notifying';
const rootReducer = combineReducers({
routing,
Graphing,
Navigating,
Syncing,
Notifying
});
export default rootReducer;
routing.js (routing reducer)
import {LOCATION_CHANGE} from 'react-router-redux';
const initialState = Immutable.fromJS({
location: {}
});
export default (state = initialState, action) => {
if (action.type === LOCATION_CHANGE) {
return state.merge({
location: action.payload
});
}
return state;
};
As per the documentation it's suggested to use routing as the reducer key. So here you are basically trying to access the store with the key routing instead of route
I just tried it without immutable, and is as below,
const history = syncHistoryWithStore(browserHistory, store, {
selectLocationState(state) {
console.log(state.routing.locationBeforeTransitions);
return state.routing;
}
});
This will return,
Hope it helps
Related
for various reasons, my workplace is currently trying to introduce React/Redux into our project. Our project utilizes Shopify and it's Liquid templates along with jQuery. They want to migrate towards React, and we have thus far been injecting React by looking for specific ID's and injecting React Components in that way.
Due to this, and because we are now needing a store to keep and render data, I've come to a strange issue. If I wrap each one of these injected components with a Provider and store, I can essentially have each component with it's own store, but that doesn't help at all as it's pretty much mimicking local state.
Is there a way for me to 'connect' and share the store with multiple components?
I thought about wrapping the whole project, as is usually the case, but doing so would/should render the Liquid useless.
Here's an example of what's going on:
import ReactDOM from "react-dom";
import React from "react";
import attrToProps from "../../../partials/data-attribute-to-props.js";
import FavoritesToggler from "./index.js";
import store from "./../../Store/store"
import { Provider } from "react-redux"
const rootEl = document.getElementById("fav-container-react");
if(rootEl) {
const props = attrToProps(rootEl.attributes);
rootEl && ReactDOM.render(<Provider store={store}><FavoritesToggler {...props} /></Provider>, rootEl);
}
This is injected into a div that contains the 'fav-container-react' id.
But we have several of these at the moment, and I'm wondering how to get them to connect all to the same store.
Any ideas would be appreciated, including perhaps a possible change in architecture (we're required to 'show progress' in order to continue getting funded, so starting a new project isn't an option. Meaning I need a solution that is able to continuously update legacy code to React)
You don't need a provider if the component has a store prop and you use connect. The hooks won't work so I'd advise using a containers that can be refactored using the hooks when all of the project is converted to React.
const { connect } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const initialState = { counter: 0 };
//action types
const UP = 'UP';
//action creators
const up = () => ({
type: UP,
});
const reducer = (state, { type }) => {
if (type === UP) {
return { ...state, counter: state.counter + 1 };
}
return state;
};
//selectors
const selectCounter = (state) => state.counter;
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(
() => (next) => (action) => next(action)
)
)
);
const App = ({ count, up }) => {
return <button onClick={up}>{count}</button>;
};
const AppContainer = connect(
(state) => ({
count: selectCounter(state),
}),
{ up }
)(App);
const OtherContainer = connect(
(state) => ({
count: selectCounter(state),
})
)(({count})=><h1>{count}</h1>);
ReactDOM.render(
<AppContainer store={store} />,
document.getElementById('root-1')
);
ReactDOM.render(
<AppContainer store={store} />,
document.getElementById('root-2')
);
ReactDOM.render(
<OtherContainer store={store} />,
document.getElementById('root-3')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root-1"></div>
<div id="root-2"></div>
<div id="root-3"></div>
I'm using redux with gatsby by installing these packages :
react react-redux gatsby-plugin-react-redux
This is store.js file :
import { createStore } from 'redux';
import { reducer } from './reducer';
export default (preloadedState) => {
return createStore(reducer, preloadedState);
};
gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-react-redux`,
options: {
pathToCreateStoreModule: './src/redux/store',
cleanupOnClient: false
}
}
]
};
I've set cleanupOnClient to false but still when I refresh the page , the state is still the old version and it has not been persisted.
How can I persist redux state changes with gatsby ?
I added redux-persist to gatsby-plugin-react-redux, you can find it here:
https://www.npmjs.com/package/gatsby-plugin-react-redux-persist
it's the first release but seems to work :)
edit:
I see that redux-persist goes to timeout during rehydratation when using preloadedState, I don't know if it happens to you too, btw you can skip it:
export default () => {
const store = createStore(
persistedReducer,
{}, // initial state
);
const persistor = persistStore(store);
return { store, persistor };
}
I like the idea behind the persist plugin, but I found that with the createStore composition, it was easy to cause issues for other libraries wanting access to the store.
Instead I added redux-persist to my existing gatsby-plugin-react-redux setup:
createStore.js
import { compose, createStore } from 'redux'
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import initialState from './initialState'
import rootReducer from './rootReducer'
const persistedReducer = persistReducer({
key: 'root',
storage
}, rootReducer);
const composeEnhancers = (typeof window === 'object') ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : undefined
const store = () => {
return createStore(
persistedReducer,
initialState,
composeEnhancers ? composeEnhancers() : compose
);
}
gatsby-browser.js wrapper
import React from 'react'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist'
import createStore from './src/state/createStore'
export const wrapRootElement = ({ element, props }) => {
const store = createStore()
const persistor = persistStore(store)
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
{element}
</PersistGate>
</Provider>
)
}
I'm trying to export a redux project as a node_module that has an index.js shown below (simplified):
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import App from './App.jsx';
const middlewares = [thunk.withExtraArgument(), promiseMiddleware()];
const middlewareEnhancer = applyMiddleware(...middlewares);
const preloadedState = {};
const store = createStore(
rootReducer,
preloadedState,
middlewareEnhancer
);
const ExampleModule = (props) => {
return (
<Provider store={store}>
<App />
</Provider>
);
};
export default ExampleModule;
In my main application:
...
import ExampleModule from 'example-module';
class Application extends React.Component {
render() {
return <ExampleModule />;
}
}
function mapStateToProps({ state }) {
return {
state: state
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(require('..').actions, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Application);
This throws an error:
bundle.js:349 Uncaught Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)"
I'm assuming it's because this essentially creates nested <Providers> which is against Redux's methodology of one store.
My question would be what would be the best way to go about publishing a node_module that has a redux store in it?
Found the answer here:
https://redux.js.org/recipes/isolating-redux-sub-apps
It keeps the store local to the component.
So I'm trying to learn React with Redux and so far I think I've been able to work out most of the code needed to make it work but I'm having an issue with getting my state passed down to my component. I am using Visual Studio 2017's ASP.NET Core project template that has react and redux boilerplate codes and they used this:
export default connect(
state => state.weatherForecasts,
dispatch => bindActionCreators(actionCreators, dispatch)
)(FetchData);
I tried doing the same thing with my own component like so:
export default connect(
state => state.lecture,
dispatch => bindActionCreators(actionCreators, dispatch)
)(LectureTable);
but when trying to access the contents of my props, the properties I want to get are tagged as undefined. I checked through Redux devtools that my initial state exists but my component is unable to see the props I'm trying to pass to it. The weird thing is I just imitated the boilerplate code but it isn't working yet the boilerplate code works just fine (ie I can go to the component and log out its initial state).
Since I'm following the format used by Visual Studio,my actioncreators, reducers, and constants are in one file shown below:
const GET_LECTURES = "GET_LECTURES";
const initialState = {
lectures: [],
selectedLecture: {},
isLoading: false,
test: 0
};
export const actionCreators = {
requestLectures: isLoading => async (dispatch) =>
{
if (!isLoading) {
// Don't issue a duplicate request (we already have or are loading the requested data)
return;
}
dispatch({ type: GET_LECTURES });
const url = `api/lecture/`;
const response = await fetch(url);
const lectures = await response.json();
dispatch({ type: RECEIVE_LECTURES, payload: lectures });
}
};
export const reducer = (state = initialState, action) => {
switch (action.type) {
case GET_LECTURES:
return { ...state, isLoading: true };
default:
return state;
}
};
I'm sorry if its all messy. I'm really just starting to begin to understand redux..
Edit
My component code:
import React, { Component } from 'react';
import {Button, Table, Label, Menu, Icon} from 'semantic-ui-react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {actionCreators} from './../../store/Lecture';
export class LectureTable extends Component {
componentWillMount(){
// this.props.requestLectures(this.props.isLoading);
console.log(this.props.test);
}
render() {
return (
<Table size='large'>
{/*removed to make it cleaner..currently only has static data too lol*/}
</Table>
)
}
}
export default connect(
state => state.lecture,
dispatch => bindActionCreators(actionCreators, dispatch)
)(LectureTable);
where my store is configured:
import { applyMiddleware, combineReducers, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import * as Lecture from './Lecture';
import * as Counter from './Counter';
import * as WeatherForecasts from './WeatherForecasts';
export default function configureStore(history, initialState) {
const reducers = {
lecture: Lecture.reducer,
counter: Counter.reducer,
weatherForecasts: WeatherForecasts.reducer
};
const middleware = [
thunk,
routerMiddleware(history)
];
// In development, use the browser's Redux dev tools extension if installed
const enhancers = [];
const isDevelopment = process.env.NODE_ENV === 'development';
if (isDevelopment && typeof window !== 'undefined' && window.devToolsExtension) {
enhancers.push(window.devToolsExtension());
}
const rootReducer = combineReducers({
...reducers,
routing: routerReducer
});
return createStore(
rootReducer,
initialState,
compose(applyMiddleware(...middleware), ...enhancers)
);
}
my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';
import App from './pages/App';
import registerServiceWorker from './registerServiceWorker';
// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const history = createBrowserHistory({ basename: baseUrl });
// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = window.initialReduxState;
const store = configureStore(history, initialState);
const rootElement = document.getElementById('root');
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>,
rootElement);
registerServiceWorker();
The first argument to connect() should be a function that returns an object - with the props you want added as keys, and their value being the value from state. e.g.
state => ({ lecture: state.lecture })
I found the solution. First of all I'm a noob both to stackoverflow and to react so I apoligize for all my inconsistencies (if thats the right term?).
What I found out:
I am using react router
I was doing the connect method to a subcomponent of the component being rendered by the router
I placed the connect method to the parent component and it worked
Some notes:
state => state.lecture still works
I will take all of your advices to heart and change my code accordingly
The only reason I was adamant with solving the problem using the code I had was because I couldn't accept the fact that boilerplate code wouldn't work unless I had done something specifically different from what the boilerplate did. I just didn't take into account that the router played a huge role with it.
I repeat...I'm a react noob so I'm sorry for wasting your time T_T
Edit again:
I was able to connect a different child component with the Redux store. I'm trying to look at why I still can't do it for that specific component that caused me to ask this question. I'll update my answer once I find the reason.
I think in their example weatherForecasts is an object. In your example lectures seems to be an array so I suggest to rewrite your mapStateToProps function like this if you only need to get the lectures prop
state => ({ lectures: state.lectures})
if you need the whole state you can have state => state so you can access the props this.props.test and this.props.lectures
Keep in mind that mapStateToProps should return an object, not an array. By the way, in your reducer the field name is lectures (plural) not lecture so state => state.lecture will be undefined
Rick, your connect argument should be something like:
export default connect( state => {
return {
test: state.lecture // Or any value
}
})(LectureTable);
You're trying to console log the test prop, so you should include it in your connect call.
I think by doing the following steps, you can solve the issue:
First you need to call two functions when you want to connect your component to application state, one is mapDispatchToProps and another one is mapStateToProps, for your code to be clean, its better to define these functions separately and then pass them by name to connect, but if you want to use your own way you should do these changes: (assuming your reducer name is lecture from your combineReducers, and assuming you are calling requestLectures with this syntax: this.props.lectureActions.requestLectures() and importing lectureActions from the file you have written lecture related actions) :
export default connect(
state => state.lecture.lectures,
dispatch => {lectureActions: bindActionCreators(lectureActions, dispatch)}
)(LectureTable);
from above code, you do not need to export an object that contains the actions like actionCreators, you should export the requestLectures function out of it independently
add below case to your reducer so that when getting the lectures succeeds the state of the application gets updated with the lectures:
case RECEIVE_LECTURES:
return { ...state, isLoading: false, lectures: payload.lectures };
default:
return state;
}
You have two problems here.
You are defining mapStateToProps function as the first argument to connect wrong. As many of answers explain this now you should use it like, this:
export default connect(
state => ( { lecture: state.lecture } ),
dispatch => bindActionCreators(actionCreators, dispatch)
)(LectureTable);
Now, you have a lecture prop as your state. You can reach it with this.props.lecture. But in your componentWillMount method, you are trying to log it like this.props.test. It should be this.props.lecture.test.
By the way, try to use componentDidMount instead of componentWillMount since it will be deprecated in the future releases.
Here is my index.js where I initially dispatch an action to read my list of locations:
import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import configureStore from './store/configureStore';
import {Provider} from 'react-redux';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import {loadLocationList} from './actions/locationActions';
import './css/styles.css';
const store = configureStore();
render(
<Provider store={store}>
<Router history={browserHistory} routes={routes} />
</Provider>,
document.getElementById('app')
);
Then here is my action where I get the data & then create an action out of it:
export function loadLocationListSuccess(alistingData) {
return { type: types.LOAD_LOCATION_LIST_SUCCESS, listingData: alistingData};
}
export function loadLocationList() {
return function(dispatch){ //we return a function that accepts a parameter, we just called it dispatch
//dispatch(fetchCallActions.fetchCallStart("")); // we dispatch a function fetchCallStart to indicate the start of our call, this is to keep in check with our asynchronous function calls
let link = 'http://example.com:8399/location';//our fetch url
console.log(link); //we log our link, just for debug purposes
return fetch(link) //start fetch
.then(function(response) {
return response.json();
}).then(function(json) {
dispatch(loadLocationListSuccess(json));
}).catch(function(ex) {
console.log('parsing failed', ex);
});
};
}
Then here is my reducer:
import * as types from '../actions/actionTypes';
export default function locationReducer(state = [], action) {
switch(action.type) {
case types.LOAD_LOCATION_LIST_SUCCESS:
return {listingData: action.listingData};
default:
return state;
}
}
Then here is my mapStateToProps & connect function:
function mapStateToProps(state, ownProps) {
return {
// we'll call this in our component -> this.props.listingData
listingData: state.listingData
};
}
export default connect(mapStateToProps, mapDispatchToProps)(homePage);
For some reason, it cannot read state.listingData or am I actually doing it wrongly? Anyone can help me with this problem?
I tried logging state.listingData and it showed undefined
Here is my configureStore:
import {createStore, applyMiddleware} from 'redux';
import rootReducer from '../reducers';
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
import thunk from 'redux-thunk';
export default function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
applyMiddleware(thunk, reduxImmutableStateInvariant())
);
}
Here is my combined Reducer:
import {combineReducers} from 'redux';
import courses from './courseReducer';
import locations from './locationReducer';
const rootReducer = combineReducers({
courses,
locations
});
export default rootReducer;
Did I not connect it to the store properly?
Recent update:
Logging JSON.stringify(state) in mapStateToProps would actually shows the result. Thanks guys.
The correct path turned out to be state.locations.listingData because I think in my combined Reducer I included the reducer as locations so maybe thats why the state for it is state.locations. Hope this helps anyone with the problem.
Can you show the code of configureStore file? The problem might be there, may be you forgot to add reducer to list of reducers.
Does the action works right? Did you log data before dispatch(loadLocationListSuccess(json));?
UPD:
Because of rootReducer. Each reducer creates their own key in store. When you combine your reducers in rootReducer, like:
import locations from './locationReducer';
const rootReducer = combineReducers({
courses,
locations
});
It creates store with this kind of structure:
const store = {
courses: {},
locations: {}
}
So, after that you dispatched action and reducer changed the data to this:
const store = {
courses: {},
locations: {
listingData: someData
}
}
If you want to access to listingData like: state.listingData, you need to change a little your reducer and combineReducer to:
export default function listingData(state = {}, action) {
switch(action.type) {
case types.LOAD_LOCATION_LIST_SUCCESS:
return action.listingData;
default:
return state;
}
}
...
import listingData from './locationReducer';
const rootReducer = combineReducers({
courses,
listingData
});