maybe im missing the point or how sagas work but I'm not sure how to do the following
export default function* (){
yield all([
takeLatest(TOGGLE_MODAL, toggleModal)
]);
}
I have this "initial" function and inside here I call other functions.
one of the functions I call is a generator function and it works correctly
function* myOtherFunction(){
}
say I want to call this function elsewhere in my code, how would I do it?
I want to call it inside an action creator
(it HAS to be a generator as I'm using yield inside it)
You don't call Sagas directly.
You create actions through action creators, which you then dispatch to the store.
You register your sagas in the saga middleware on your store, so they get called each time a specific action is received.
Let's say you have an action CALL_OTHER_FUNCTION and the corresponding action creator callOtherFunction(). you dispatch it somewhere, for example in an component with mapDispatchToProps:
const mapDispatchToProps = dispatch => {
return {
callOtherFn: () => dispatch(callOtherFunction())
};
};
In your saga, you now just have to listen to this action with take(), takeAll(), takeLatest() or another effect creator that suits your needs.
export default function* (){
yield all([
takeLatest(TOGGLE_MODAL, toggleModal),
takeLatest(CALL_OTHER_FUNCTION, myOtherFunction]);
}
after that, your myOtherFunction generator is called on each action you dispatch to the store.
Related
I'm kind a new to using userReducer with Context API, so I'm not sure how I can call dispatch function from another useReducer.
useReducerB
...code...
function someFunction()
{
dispatch(otherActions.B) // this action i like to call from another reducer
}
useReducerA
const { someFunction } = useContext();
dispatch(actions.A); // this is the current reducer
someFunction(params) // dispatch action from another reducer
App
<ContextB.Provider value={someFunction}>
<ContextA.Provider value={...}>
As u can see the provider for the function is level above the context where I like to call dispatch.
I found out that u can write custom combine reducers utils, but I like to know if this is possible.
I'm getting error XXX is not a function...
Br, Igor
I'm using Redux saga in my React Native app and have a generator function that looks like this:
function* func1(action) {
setInterval(() => {
yield put(ActionCreators.actionCreator1(action));
}, 1000)
}
where ActionCreators is a set of action creators defined elsewhere. This doesn't work, because I'm trying to call the action creator inside the callback of setInterval, which isn't a function generator.
Does anyone know how I can approach this?
I am trying to learn a react-redux. And in order to call the external rest API, I am using thunk middleware.
However the syntax to so confuses me a lot, I would appreciate if someone can explain me.
export function listTodos() {
return (dispatch) => axios.get("http://localhost:5001/todos")
.then(response => {
console.log(response.data);
dispatch(getTodos(response.data));
})
}
export function _listTodos(todos) {
return {
type: 'LIST_TODOS',
todos: todos
}
}
so in order to get the response from the external API, I am calling listTodos function, which dispatches an action returned by listTodos function.
The part confuses me is Syntax (maybe because it's ES6 an I am not very familiar with that).
how come return is taking a parameter, dispatch?
from where this dispatch is coming, I am not passing anything when I call listTodos
why do I even need a return, shouldn't dispatching an action enough from within then
Redux only accepts plain javascript objects for dispatch. The thunk middleware overcomes this by allowing you to provide functions to the dispatch.
In this example, essentially what you're doing is returning a function reference to the dispatch which will be executed by thunk.
how come return is taking a parameter, dispatch?
from where this dispatch is coming, I am not passing anything when I call listTodos
Once thunk encounters a function it executes that function and passes dispatch as a parameter so that you can use it in the function to actually do the dispatch (_listTodos(todos)).
So thunk will do something like this
if(typeof action === 'function') {
//Reason why it takes a dispatch parameter
//And thunk is the one who sends it to the function
action(dispatch);
}
where action is the function that you have returned from your listTodos()
why do I even need a return, shouldn't dispatching an action enough from within then
return is needed to give thunk the function so that it can perform the above action.
I am new to react and redux xo my questions will sound basic.
What does dispatch means? I am referring to the term dispatching an action.
Why do we need mapDispatchToProps to store actions on redux? We can simply import an action and use it. I have a scenario in which I have to load data when a component is mounted.
#mariazahid mapDispatchToProps will bind the action to your component so that you can pass it down to your presentation components. This is a pattern that is normally used within using Redux with React.
You can import your action and just dispatch the action, but in most scenarios a container -> component pattern is used. A container is where the actions are mapped to and the state and the only goal of this component is to pass this data down to components that are used for presenting that data.
When working in teams, it's a pattern that is easily adoptable. Instead of importing actions from left right and center, you will just have to be aware of the container and how it passes the required actions/data down to the children.
From an implementation perspective, dispatch is just a method that is used to communicate with your reducers
Let say that your action looks something like this
function myAction() {
return { type: 'MY_ACTION' };
}
You're trying to communicate with the reducer that responds to the action type 'MY_ACTION'
In your mapDispatchToProps you'd typically do something like this;
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(myActions, dispatch) }
}
Effectively, you're wrapping(binding) your actions to the dispatch method;
function bindActionCreators(actions, dispatch) {
// this is a very trivial implementation of what bindActionCreators does
let wrappedActions = {};
Object.keys(actions).forEach(action =>
// for every action, return a function that calls dispatch on the result of what your action returns
return function(...args) {
// remember here that dispatch is the only way you can communicate with the reducers and you're action's type will determine which reducer responds to return the new state
return dispatch(actions[action](..args));
}
);
}
And so, these "bound" actions are now assigned to a props.actions in your component.
What is the best practice around redux action creator when it comes to calling action creators for 2 different events for a same functionality? Using redux-thunk to dispatch the actions.
E.g. Lets say I have to write an action creator for saving and printing the user name. Which action creator is better between the 2 below and why?
Action Creator 1
export function actionCreator1(actionType)
{
switch(actionType)
{
case "save":
// dispatch
case "print":
// dispach
default:
}
}
Action Creator 2
export function actionCreatorSave()
{
// dispatch
}
export function actionCreatorPrint()
{
// dispatch
}
Both are wrong. In redux, action creators don't dispatch actions. They return actions that you dispatch (in React this is preferably within react-redux mapDispatchToProps function).
http://redux.js.org/docs/basics/Actions.html#action-creators
mentions this as opposite to flux.
(the exception being async actions)