Couldn't find it in the docs: What is the best practice when using React Navigation together with Redux?
Should you do 1.:
export default withNavigation(connect(
mapStateToProps,
{ someFunction }
)(SomeComponent))
Or 2.:
export default connect(
mapStateToProps,
{ someFunction }
)(withNavigation(SomeComponent))
?
After some googling it seems to be that 1. is the best practice.
Related
I don't know how to compose Redux with onClickOutside HOC in my component export...
I tried sth like this but didn't work
export default compose(
connect(null, mapDispatchToProps),
onClickOutside)
(DropMenu, clickOutsideConfig);
Error I got :
TypeError: Cannot read property 'isReactComponent' of undefined
You can solve this problem without using the redux compose method. Try something like the following:
export default connect(null, mapDispatchToProps)(onClickOutside(DropMenu))
Not sure what you're trying to do with the clickOutsideConfig, but you can always pass it in as props to DropMenu.
I'm new to redux and try to use it with Typescript.
I use mapDispatchProps for connect() in the component, when import this component, it requires to pass actions as props which it shouldn't.
The weird thing is when I tried with other actions, it seems fine, but just something wrong with this one.
The full code is
here
and the error message in index.tsx, where I want to import component.
Error message
Property 'getInputUserName' is missing in type '{}' but required in type 'Readonly>'.ts(2741)
App.tsx(8, 3): 'getInputUserName' is declared here.
Really happy to hear any advice.
Thanks in advance!
You should pass the action with same name as it is declared in the Props interface.
So either try this -
export default connect(
mapStateToProps,
{ getInputUserName: loginUserName }
)(App)
or this -
interface Props {
inputUserName: string;
loginUserName: typeof loginUserName;
}
Can you try this,
export default connect(
mapStateToProps,
{ getInputUserName: loginUserName }
)(App);
Cheers,
I want to use nextjs in my new project with redux and thunk also. I wondering how to implement all packages correctly.
In my previous projects pages has HOC components like:
import {connect} from 'react-redux';
import Page from './about';
import {fetchUsers} from '../../actions/user';
const mapStateToProps = (state) => {
const {users} = state;
return users;
};
const mapDispatchToProps = (dispatch) => {
return {
fetchUsers: () => dispatch(fetchUsers())
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Page);
And method to fetch users I implemented in componentDidMount
How to implement the same logic for nexjs?
What have I do?
Implemented store (base on next-redux-wrapper in _app.js)
Created HOC component (like below) with mapStateToProps and
mapDispatchToProps
Currently I thinking about use somehow this.props.fetchUsers method into getInitialProps - documentation say that this method should be used to fetch data before render site.
Please help me with correctly redux implementation for nextjs
You can follow this example
The correct way is to pass the store to the getInitialProps context and to the App component so you can pass it to the Provider.
The getInitialProps can't access to instance of the component, this is not accessible, so you can't call this.props.fetchUsers, but, because you are passing store to its context, you can do store.dispatch(fetchUsers()) and remove dispatch from mapDispatchToProps.
Generally I dispatch actions in getInitialProps and then map state to props within connect.
When using import * as MyActions from 'not/important'
Is it possible to then send all of MyActions to component props?
connect(mapStateToProps, { MyActions})(MyClass)
Yes, it's possible.
connect(mapStateToProps, MyActions)(MyClass)
Or if you want to include more actions from other places, you can use the spread operator ...:
connect(mapStateToProps, { action1, action2, ...MyActions })(MyClass)
I'm new to ES6 and Redux. Im looking at some code and trying to understand what is going on in this new ES6 syntax.
I feel like this may be simple but i am not understanding it and it might help someone else in a similar position to me.
i want to know how the following code is creating a react element. im familiar with the React.createClass method, but that doesnt seem to be stated here or at least not explicitly. i can see React is imported, but it isnt mentioned in the rest of the code. so then how the FileTable get turned into a react component?
I can see the const variable FileTable seems to contain what would usually go in the render method of React.createClass, but if that is the case, where would methods like componentDidMount, componentDidUpdate, etc be defined?
Any help on this is greatly appreciated.
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';
const FileTable = ({ fileList, getFileList}) => {
return (
<ul className="filterable-table">
{fileList.map((file)=><li>{file.fileName}</li>)}
</ul>
);
};
FileTable.propTypes = {
fileList: PropTypes.array,
};
const mapStateToProps = (state) => {
return {
fileList: state.fileList
};
};
const mapDispatchToProps = (dispatch) => {
return {
getFileList: () => dispatch(actions.getFileList())
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(FileTable);
You can create react components in 3 ways - React.createClass, ES6 class or
Stateless (pure) function component. This is a stateless component, which means that it doesn't have state, life cycle methods (like componentDidMount or componentDidUpdate), and refs, and as you surmised it's similar to the render method of a react class.
Whenever you need a purely representational dumb component you can use a stateless component, due to its brevity. It goes nicely with redux, as the connect create a smart component that wraps the stateless method.
Regarding performance, stateless components don't have any performance gain over ES6 class component without state. However, Facebook stated that in the future there will be some optimizations.
It doesn't have to be declared here as a React component; React knows about pure functions.
Pure functions don't need to inherit from Component. They're not appropriate for all component types, but for simple HTML renders they're preferred (e.g., see eslint-plugin-react prefer-stateless-function.
Pure functions don't have component lifecycles, associated methods, etc.