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)
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 am using flux. I have used combineReducers - all works. But what is the purpose of using combineReducers in the redux?
any one help me to understand by updating my code?
why should I combine Reducers ?
if I am not use, what is the impact ?
here is my code :
import { combineReducers } from "redux";
import rootReducer from "./countAddReducer";
export default combineReducers({
value: rootReducer
});
Live Demo with sample app
combineReducers is used to combine all the reducers to one single store object, so that it can be used in every component.
In flux, you would have different Flux Stores to manage different state. With Redux, there is just one store, but combineReducers helps you keep the same logical division between reducers.
In your example,
export default combineReducers({
value: rootReducer,
removes: countRemoveReducer
});
you got two reducers rootReducer and countRemoveReducer, and you combine these two make available in the components connect() method as mapStateToProps, where mapStateToProps have a state object which contains both these reducers.
Now, if you want to share state between two reducers then we cannot achieve it with combineReducers. For that purpose we need redux-thunk.
I have updated your code, https://codesandbox.io/s/lq87v947
It separates the state corresponding to a particular reducer into their own object.
Example:
import { combineReducers } from "redux";
import userReducer from "./userReducer";
import blogPost from "./blogReducer";
export default combineReducers({
user: userReducer,
blogPost: blogReducer,
});
When you start dispatching actions to either userReducer or blogReducer, the global redux state is just one object, but that object looks like this.
const reduxState = {
user: {
//state created by userReducer will go in here
},
blogPost: {
//state created by blogReducer will go in here
}
}
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.
i have a file inside action directory which is root.js.
Root.js will compile all the others action inside, and i bind it with bindActionCreators
export const all = (store) => {
AUTH: bindActionCreators(AUTH.actions, store.dispatch),
....: .....
}
From what i learned, bindActionCreators is for the purpose of auto dispatching the action.
If that is the case, then how do i access it from smart component?
I see things like dispatch(action). But since now i already bind it globally, i dont think that i would need to specify dispatch anymore. How do i do it, or is there any part that i misunderstood?
Thank you
bindActionCreators - will create an object of actions each wrapped with the dispatch.
It's good for passing them as refs to non-connected components that should not know anything about redux or dispatch.
Quote from the DOCS:
The only use case for bindActionCreators is when you want to pass some
action creators down to a component that isn't aware of Redux, and you
don't want to pass dispatch or the Redux store to it.
So if you want that connected component to pass action creators to a dumb component, you can set an object via bindActionCreators and pass it with props to the dumb component.
Example:
const myActionCreators = bindActionCreators(Auth.myActions, dispatch)
<DumbComponent {...myActionCreators} />
The recommended approach is to have each connected component file import the action creators it needs, and use the "object shorthand" supported by connect:
import {addTodo, toggleTodo} from "./todoActions";
const actions = {addTodo, toggleTodo};
export default connect(null, actions)(TodoList);
// each TodoList instance now has this.props.addTodo and
// this.props.toggleTodo, which will dispatch actions when called.
I try to follow the rules of the Redux documentation about presentational/container components and I connect my containers using react-redux connect(). I use mapDispatchToProps and bindActionCreators to inject the required actions into a props call actions. I never use the second parameter ownProps.
As my app became more and more complex, I end up with a lot of mapDispatchToProps() (one for each container) that are almost identical; they bind all actions from almost all action creators.
So I was wondering: what will be the drawbacks to have only one mapDispatchToProps function that bind all actions and use it in each containers?
Something like that:
import { bindActionCreators } from 'redux'
import * as EventsActionCreators from '../../actions/EventsActionCreators'
import * as TagsActionCreators from '../../actions/TagsActionCreators'
import * as UsersActionCreators from '../../actions/UsersActionCreators'
export default function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(
{
...EventsActionCreators,
...TagsActionCreators,
...UsersActionCreators,
},
dispatch
),
}
}
If your application is simple enough to warrant this, then I would say go for it. The downsides I see, if any, have to do with your connects not being explicit about what actions will be available. To know whats available, you have to go check the definition of mapDispatchToProps.
That said, why even have this as a function? mapDispatchToProps can receive an object, so in your mapDispatchToProps.js, this would suffice:
import * as EventsActionCreators from '../../actions/EventsActionCreators'
import * as TagsActionCreators from '../../actions/TagsActionCreators'
import * as UsersActionCreators from '../../actions/UsersActionCreators'
export default {
...EventsActionCreators,
...TagsActionCreators,
...UsersActionCreators,
}
then
import mapDispatchToProps from './mapDispatchToProps';
import SomeComponent from './SomeComponent';
export ConnectedComponent = connect(null, mapDispatchToProps)(SomeComponent);