Checkout the video series here
An unsplash image gallery built with redux saga
After cloning, checkout the starter
branch
git checkout starter
Tutorial for building an unsplash image gallery with redux saga :atom:
Home Page: https://wtjs.github.io/what-the-splash/
License: MIT License
Checkout the video series here
An unsplash image gallery built with redux saga
After cloning, checkout the starter
branch
git checkout starter
I have followed the examples and did some changes as I am using typescript.
import { all, call, fork, put, takeEvery } from "redux-saga/effects";
import { ILogInEntity } from "src/model/LogIn";
import { ILoginResponse } from "src/model/loginResponse";
import history from "../history";
import {callApi} from "../Utilities/api";
import { baseUrl } from "../Utilities/baseURL";
import { AUTHENTICATE_REQUEST } from "./ActionTypes";
import { authenticateError, authenticateSuccess, IUserProfileAuthenticateAction} from "./authenticateActions";
const authenticate = (credentials: ILogInEntity) => { const login = "?qlogin=" + credentials.login;
const password = "&password=" + credentials.password;
const url = login + password; return callApi("getOne", baseUrl, "users/", url);};
export function* fetchAuthenticationSaga({
credentials: credentials}: IUserProfileAuthenticateAction) {
try {
const response = yield call(authenticate, credentials);
const user: ILoginResponse = {
succeeded: true,
userProfile: {
id: Number(response.data[0].id),
name: response.data[0].email
}
};
yield put(authenticateSuccess(user));
history.push("/accounts/" + response.data[0].id);
} catch (err) {
yield put(authenticateError("Authentication failed! Please try again"));
}
}
function* watchLogIn() {
yield takeEvery(AUTHENTICATE_REQUEST, fetchAuthenticationSaga);
}
export function* authenticateSaga() {
yield all([fork(watchLogIn)]);
}
export default authenticateSaga;
import { runSaga } from "redux-saga";
import { ILogInEntity } from 'src/model/LogIn';
import * as api from "../Utilities/api";
import { authenticateRequestStartedAction, authenticateSuccess, IUserProfileAuthenticateAction} from "./authenticateActions";
import { fetchAuthenticationSaga } from "./AuthenticateSagas";
test("should test authenticate success", async done => {
const dispatchedActions = [{}];
const resultStub = { succeeded: true, userProfile: { id: 10, name: "fixtureUser" } };
const spy = jest.spyOn(api, "callApi");
spy.mockImplementation(() => Promise.resolve(resultStub));
const fakeStore = {
dispatch: (action: IUserProfileAuthenticateAction) => dispatchedActions.push(action) };
const credentials:ILogInEntity={ login:'test', password:'password' }
await runSaga(fakeStore, fetchAuthenticationSaga, authenticateRequestStartedAction(credentials)); done();
expect(spy.mock.calls.length).toBe(1);
expect(dispatchedActions).toContainEqual(authenticateSuccess(resultStub));}, 10000);
--
I can see that it is entering the real saga on line
await runSaga(fakeStore, fetchAuthenticationSaga, authenticateRequestStartedAction(credentials));
I am having error messages:
RUNS src/LogIn/AuthenticateSagas.spec.ts
C:\React\ReduxSamples\my-app\node_modules\react-scripts-ts\scripts\test.js:20
throw err;
^
Error: expect(array).toContainEqual(value)
Expected array:
[{}, {"message": "Authentication failed! Please try again", "sendingRequest": false, "type": "AUTHENTICATE_ERROR"}]
To contain a value equal to:
{"sendingRequest": false, "type": "AUTHENTICATE_SUCCESS", "userProfile": {"succeeded": true, "userProfile": {"id": 10, "name": "fixtureUser"}}}
I don`t want my tests to access the server.
Any help will be appreciated.
Thanks
Hello,
I am using this code for learning redux-saga please can you explain why redux saga calls api two times even if I am calling once ?
Thanks
Hello,
It's not an issue, just a query I want to ask.
In Lesson-5, you very well explained about the take
effect using the LOGIN LOGOUT events. Now I am trying to applying the same login to my SIGNUP action.
User press signup button, SIGNUP event gets fired -> it could pass or fail -> if pass then fire SIGNUP_SUCCESS and then WELCOME_NOTE -> if fail then fire SIGNUP_FAIL.
function* watchSignupSaga(){
yield take(NEW_USER.SIGNUP);
call(handleSignup)
yield take(NEW_USER.SIGNUP_SUCCESS);
call(handleUserSignupSucces)
yield take(NEW_USER.WELCOME_NOTE)
call(handleWelcomeNote)
yield take(NEW_USER.SIGNUP_FAIL);
call(handleUserSignupFail)
}
But this won't work as expected, because the SIGNUP_FAIL require all its previous actions to happen.
How do I handle this? Any suggestions, please.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.