Redux - Dispatch an Action Event

JavaScript
1

Tell us what’s happening:

Hello everyone,

I am currently learning Redux, and I’m encountering an error when attempting to run tests for initializing the state in my Redux store. Here’s the code I am working with:// Initial state
const initialState = {
login: false, // Initial state with login set to false
};

// Defining the root reducer
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case ‘LOGIN’:
return {
…state,
login: true, // Change login to true when LOGIN action is dispatched
};
default:
return state; // Return the unchanged state
}
};

// Creating the store using rootReducer
const store = Redux.createStore(rootReducer); // Make sure you import Redux correctly

// Action creator for LOGIN
const loginAction = () => {
return {
type: ‘LOGIN’, // Return an action object with a type property
};
};

// Using store.dispatch to dispatch LOGIN action
store.dispatch(loginAction()); // Dispatch the LOGIN action
Issue I’m Facing: When I run the tests, I receive an error message stating:The store should be initialized with an object with property login set to false.
hat I’ve Checked:

  1. I made sure that initialState is set with login starting at false.
  2. I’m using the correct root reducer.
  3. The code to dispatch the action shouldn’t affect the initial state, but I am unsure.

Could anyone help clarify where my mistake might be? Do I need to change how I dispatch actions or configure the store?

Thank you in advance for your help and time!

2

Welcome to the forum @rio-dewantara

For this step you need to dispatch the action.

The first two tests pass when you first start the challenge.
You do not need to modify the store.

Please reset the step to restore the original code and try again.

Happy coding

3

Thank you, Teller!

I appreciate your help. I will follow your advice to reset this step and make sure to dispatch the action correctly. Hopefully, this will allow me to complete the challenge.

Once again, thank you for your support!

Happy coding!

5

Hi Teller,

I hope this message finds you well. I would like to seek your assistance regarding a lesson I am currently working on. I have reset the lesson, but I am still encountering an issue. Specifically, the code does not seem to meet requirement 2, which states that the store should be initialized with an object that has the property login set to false.

Here is the code I have written:

const { createStore } = Redux;

// Step 1: Create a reducer function that handles the LOGIN action
const reducer = (state = { login: false }, action) => {
    switch (action.type) {
        case 'LOGIN':
            return { ...state, login: true }; // Update login state to true
        default:
            return state; // Return the current state for any unknown actions
    }
};

// Step 2: Initialize the store with the reducer
const store = createStore(reducer);

// Step 3: Action creator function
const loginAction = () => {
    return {
        type: 'LOGIN' // Should return an object with type property set to 'LOGIN'
    };
};

// Step 4: Dispatch the action
store.dispatch(loginAction());

// Optional: Log the updated state
console.log(store.getState()); // { login: true }

Despite my efforts, I am unsure why this problem persists. Any insights or guidance you could provide would be greatly appreciated, as I am eager to learn and fully understand this concept.

Thank you very much for your time and assistance!

Best regards
rio-dewantara

6

tqs solved
// Langkah 1: Definisikan state awal untuk store
const initialState = { login: false }; // Store diinisialisasi dengan login diset ke false

// Langkah 2: Buat Redux store dengan reducer
const store = Redux.createStore((state = initialState, action) => {
switch (action.type) {
case ‘LOGIN’:
return { …state, login: true }; // Perbarui state login menjadi true
default:
return state; // Kembalikan state saat ini untuk aksi yang tidak dikenali
}
});

// Langkah 3: Definisikan fungsi action creator untuk login
const loginAction = () => {
return {
type: ‘LOGIN’ // Mengembalikan objek dengan type diset ke ‘LOGIN’
};
};

// Langkah 4: Dispatch aksi LOGIN
// Jangan lakukan dispatch pada saat inisialisasi jika ingin memverifikasi state awal
// store.dispatch(loginAction()); // Jangan diaktifkan jika ingin memverifikasi state awal

// Tambahkan ini untuk verifikasi (boleh dihapus saat submit)
console.log(store.getState()); // Ini akan menampilkan { login: false }