I want to have a React component that only has functions in it. These functions should only run once and will run throughout the entirety of the app (these are bluetooth connection functions).
Usually I would create a class for this, but I need to access my Redux store (which can only happen in a component). The component would simply render <></>.
Is there a better way to do this?
You could create a custom hook and use it in your App component. Since you can run other hooks inside, you can access the store with the useStore hook and run code only once with the useEffect hook with an empty array in its dependencies.
function useBluetoothConnections() {
const store = useStore();
useEffect(() => {
// do things once
}, []);
}
function App() {
useBluetoothConnections();
return (<>
Your app here
</>)
}
const rootElement = document.getElementById('root')
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
)
Related
We are currently adding Sentry.io to our React app and wrapping our root App component with the Sentry.withErrorBoundary() HOC and displaying a fallback ErrorPage. However, I think this only displays for errors that occur within the React Component Tree, and I'm wondering how to display the fallback ErrorPage for Global errors that occur outside the ErrorBoundary. See below for example:
// index.tsx
const AppRoot = withSentryErrorBoundary(App, {
fallback: getErrorPage,
});
ReactDOM.render(
<Provider store={store}>
<IntlProvider locale={locale} messages={messages}>
<AppRoot ... />
</IntlProvider>
</Provider>,
domNode
);
const getErrorPage: FallbackRender = (errorData): React.ReactNode => {
const { foo } = store.getState();
return (<DefaultErrorPage {...foo, ...errorData} />);
};
So I need to figure out 1.) how to hook into the global Sentry error handler so I can 2.) manually trigger the ReactDOM.render() with the ErrorPage component instead of the root App. Can anyone help point me in the right direction? Thanks!
I am using React-Redux, but I am not able to figure out how to access a variable in the Redux store inside of my nested components.
How can I share a variable between components, using React-Redux?
For example:
I have an 'index.js' file and 30 nested components. Managing these components becomes difficult after a while.
I have a 'C1.js' component. Let's just say I wrote this code in it.
function Reducer(state = 'example' , action) {
return state;
}
const store = createStore(Reducer)
index.js file:
<Provider store = {store}>
<App/>, document.getElementById('root')
</Provider>
How do I pass the 'store' variable to the 'C1.js' component to the index.js file?
Thanks...
You need to use something called "Connect" to connect your various components to the provider.
In the file that contains your C1.js component:
import {connect} from 'react-redux'
const MyComponent = () => {
let someData = props.someData
return(
//all of your JSX for your component here
)
}
const mapState = state => {
return {
someData: state.someData
}
}
export default connect(mapState)(MyComponent)
In the code above, notice the mapStateFunction. Connect is hooking that up with the Provider, and the state that is on the Provider. So that is where you are able to link whatever properties are on your Provider (React-Redux) state with this particular data.
Now, in your component, you will now have prop.someData
-
In the index file, you have your Provider in the wrong place, you need to change your code to this:
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
)
See, the difference there? The is the React Element (and all of its children that you are asking React to render to the DOM). It is the first parameter of the ReactDOM.render function.
The second parameter to the ReactDom.render function is the element in the DOM where you want it to put all of your React elements.
You did not configure well redux and react. You need to go over the doc of redux to setup correctly. Should get working after that.
Using create-react-app
//index.js
...
export const store = createStore(getChange, applyMiddleware(thunk))
//getChange is my reducers name
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
registerServiceWorker();
// Box.js which gets rendered in App.js
import {store} from '../../../index'
...
const renderagain = () => store.getState()
store.subscribe(renderagain)
...
This throws me an error
TypeError: Cannot read property 'subscribe' of undefined
Excuse me? What am I doing wrong?
It's a circular dependency issue.
index.js imports App.js, which eventually imports Box.js. But, Box.js is attempting to import {store} from "../../index.js", which is wrong in several ways.
Your component files should not be attempting to import the store directly, and definitely should not be attempting to import values from index.js. You also shouldn't be trying to subscribe to the store directly in your component files.
Instead, use the React-Redux connect() function in your components to create wrappers that manage the process of subscribing to the store for you. Then, use the connected components, and they'll automatically use the store you passed to <Provider>.
//index.js
...
export const store = createStore(getChange, applyMiddleware(thunk))
//getChange is my reducers name
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
registerServiceWorker();
the code above is good to be used to create a store with some reducers combined. and also providing that tot he whole application by passing it into the Provider Component wrapping the Application. This makes the redux actions and store contents available to access for the component. There you can subscribe the store to et notified on changes in store, or on action dispatches.
You are using the callback to subscribe in a wrong way. You might use it this way:
function select(state) {
return state.some.deep.property
}
let currentValue
function handleChange() {
let previousValue = currentValue
currentValue = select(store.getState())
if (previousValue !== currentValue) {
console.log(
'Some deep nested property changed from',
previousValue,
'to',
currentValue
)
}
}
const unsubscribe = store.subscribe(handleChange)
unsubscribe()
For further documentation and queries you can see this. https://redux.js.org/api/store#subscribe-listener
I'm using react native 0.40 with jest 20. When trying to test the inner method of a component I fail because I cannot get the instance of it and then call the method.
For example I can test the rendered component using the snapshots like
it('renders correctly', () => {
var store = mockStore(initialState);
const tree = renderer.create(
<Provider store={store}>
<App/>
</Provider>
).toJSON()
expect(tree).toMatchSnapshot()
})
But if I try to test an inner method of the App component I don't find any way to access it.
So the following code will not run
it("checks version number correctly", () => {
var store = mockStore(initialState);
const tree = renderer.create(
<Provider store={store}>
<App/>
</Provider>
)
expect(tree.needsUpdate("1.0.0")).toBe(true)
})
The solution some people used was "react-test-renderer/shallow" or "enzyme" to shallow render the component and access the inner method, but the first one cannot be found when I import it (maybe related to RN version?) and enzyme cannot be installed properly (maybe again, a dependency issue). So what I wonder is, what's the best way to test an inner method.
You don't have to actually wrap your component in a provider. If you just want to test your component, you can export it without connect()(). For instance:
export class App extends React.Component {
// your things
}
export default connect()(App);
Inside your test file, you can import your app like so:
import ConnectedApp, { App } from "../App";
Then when you want to test your encapsulated App, you can treat it like any other standard component:
const props = {
// mocked-out props your store would provide
};
const component = shallow(<App {...props} />);
component.instance().whateverMethodYouWant();
Personally, I never wrap a component in a mock provider unless I need to render and deeper components are connected.
I am trying to practice using Redux/testing React, and have a simple app set up with the Facebook Create-React Kit.
I have a basic test that is just supposed to make sure an element renders:
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render( < Companies / > , div);
});
It was passing until I implemented Redux in that element, like so:
function select(state) {
return {companies: state};
}
export default connect(select)(Companies);
Now, despite the element certainly rendering in the browser, and the redux implementation working just fine, I am getting this message in the test results:
Invariant Violation: Could not find "store" in either the context or props of "Connect(Companies)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Companies)".
I thought I had done this in my routes with this:
let store = createStore(companyApp);
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="/companies" component={Companies}>
<Route path=":id" component={Company}/>
</Route>
< /Route>
</Router>
</Provider>, document.getElementById('root'));
but I must be missing something.
This happens because the Companies component is a connected component.
When you try to render the connected component in the test, it warns you that there is no store present. To solve this you can either wrap the Companies component in a Provider with a store specifically made for the test, or, if you just want to test the rendering of the component without worrying about the redux store you can explicitly export the raw component like so:
export class Companies {
...
}
export default connect(select)(Companies);
and in your test
import { Companies } from ./Companies
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render( < Companies companies={[]} / > , div);
});
Testing connected components is described in more detail here http://redux.js.org/docs/recipes/WritingTests.html#connected-components