Comments (10)
I will also check if the generators can include this by default.
from react-boilerplate-typescript.
If I add reducers init to app/configureStore.ts
const store = createStore(
createReducer({
newPage: NewPage,
secondPage: SecondPage,
}),
initialState,
enhancer,
) as InjectedStore;
and remove useInjectReducer({ key: 'newPage', reducer: reducer });
from corresponding components - everything looks ok.
Please, can you advice about using the reducer injectors.
Is this 'fix` is a correct workaround about this issue?
from react-boilerplate-typescript.
Can you show me the code of the pages you generate its hard to tell whats wrong judging by the error only.
from react-boilerplate-typescript.
nothing changed in the pages/containers after generation. So, I think they are exacatly the same as in the templates.
/*
*
* NewPage
*
*/
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { useSelector, useDispatch } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { useInjectReducer, useInjectSaga } from 'redux-injectors';
import makeSelectNewPage from './selectors';
import reducer from './reducer';
import saga from './saga';
import messages from './messages';
const stateSelector = createStructuredSelector({
newPage: makeSelectNewPage(),
});
interface Props {}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function NewPage(props: Props) {
// useInjectReducer({ key: 'newPage', reducer: reducer });
useInjectSaga({ key: 'newPage', saga: saga });
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { newPage } = useSelector(stateSelector);
const dispatch = useDispatch(); // eslint-disable-line @typescript-eslint/no-unused-vars
return (
<div>
<FormattedMessage {...messages.header} />
</div>
);
}
export default NewPage;
from react-boilerplate-typescript.
useInjectReducer({ key: 'newPage', reducer: reducer });
is the newPage
key same for both of the generated pages?
from react-boilerplate-typescript.
no, other page is using own names
/*
*
* SecondPage
*
*/
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { useSelector, useDispatch } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { useInjectReducer, useInjectSaga } from 'redux-injectors';
import makeSelectSecondPage from './selectors';
import reducer from './reducer';
import saga from './saga';
import messages from './messages';
const stateSelector = createStructuredSelector({
secondPage: makeSelectSecondPage(),
});
interface Props {}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function SecondPage(props: Props) {
useInjectReducer({ key: 'secondPage', reducer: reducer });
useInjectSaga({ key: 'secondPage', saga: saga });
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { secondPage } = useSelector(stateSelector);
const dispatch = useDispatch(); // eslint-disable-line @typescript-eslint/no-unused-vars
return (
<div>
<FormattedMessage {...messages.header} />
</div>
);
}
export default SecondPage;
Also, if I click in some other oder, I will got same error message for the second page.
from react-boilerplate-typescript.
Then I don't know why at this point. If you give a sample repo to download I can check if its a a bug you introduce or it comes from boilerplate's logic.
from react-boilerplate-typescript.
is this will helps you?
Repo:
https://github.com/idMolotov/rbt-examples
Commit with changes made on initial setup:
idMolotov/rbt-examples@a5b1371
from react-boilerplate-typescript.
Your selectors aren't selecting their slices but just return the root state object.
Go to your selectors.ts
in your new page container and make sure its like
const selectSecondPageDomain = (state: ApplicationRootState) =>
state.secondPage || initialState;
Notice the .secondPage
. So you work on your slice
Read more about the error here
from react-boilerplate-typescript.
Big thanks for your support!
Very nice.
from react-boilerplate-typescript.
Related Issues (20)
- Update the project with stricter typings HOT 1
- Update generator templates with latest changes HOT 1
- Replace tslint with eslint HOT 7
- invalid align-items property value HOT 1
- Add tsc --noEmit for type checking on pre-commit hook
- Syncing with the original upstream HOT 2
- delete `revert-26-patch_types`
- Not working with IE11 and some older edge versions HOT 1
- Remove project fork status to properly display contributions HOT 2
- Mark the repository as template
- Reasons for omitting immer HOT 1
- Convert server to use typescript HOT 5
- Webstorm is showing error because can't import webpack.prod.babel.js HOT 7
- Can't import png file HOT 1
- .
- error loading js file
- git clone repo and npm run setup gives error
- Not working.
- ngrok - platform darwinarm64 is not supported.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-boilerplate-typescript.