learn-co-curriculum / react-redux-create-store

Create Store from Redux

Objectives

1. Add the Redux library to our projects
2. Use the createStore method from the Redux library.

Overview

Now that we understand how createStore works, let's take a look at how we can use Redux in our application.

Using Redux

Lucky for us, we don't actually have to build out our own createStore function. We can use the built in function from the Redux library to make our store. This will give us all the methods that come built in, plus some other great functionality that we'll use later on.

This is a code along, so if you would like to follow along, please fork this repo on github.

To get started, let's add the Redux library to our project.

npm install --save redux

Next, let's define a reducer function in reducers/counterReducer.js to pass to our createStore function.

// src/reducers/counterReducer.js
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNT':
      return state + 1
    case 'DECREMENT_COUNT':
      return state - 1
    case 'RESET_COUNT':
      return 0
    default:
      return state
  }
}

export default counterReducer

Finally, let's take a look at the index.js file inside of our src directory. Here, we'll create our store by importing the createStore method from redux, as well as the reducer we just made.

import { createStore } from 'redux'
import counterReducer from './reducers/counterReducer'

const store = createStore(counterReducer)

Let's start our server by using npm start. Visit http://localhost:8080 in your browser and open up your JavaScript Console. Now, let's play around a little bit by dispatching some actions and start logging the state to the console. In our src/index.js add the following code.

// src/index.js
import { createStore } from 'redux';
import counterReducer from './reducers/counterReducer';

const store = createStore(counterReducer)

console.log(store.getState())
store.dispatch({type: 'INCREMENT_COUNT'})
store.dispatch({type: 'INCREMENT_COUNT'})
console.log(store.getState())
store.dispatch({type: 'DECREMENT_COUNT'})
console.log(store.getState())
store.dispatch({type: 'INCREMENT_COUNT'})
store.dispatch({type: 'INCREMENT_COUNT'})
console.log(store.getState())
store.dispatch({type: 'RESET_COUNT'})
console.log(store.getState())

This will log out:

0
2
1
3
0

Awesome!

Conclusion / So What?

Now you know how the store works in Redux. In future lessons, we'll take a deeper dive into Reducers and look at how we can connect Redux into our React applications.

react-redux-create-store's Issues

There are no Tests files

On https://learn.co/tracks/full-stack-community-bootcamp/redux/actions-and-stores/create-store the lab has no tests.
We have to fork it, then we are able to manually create a dummy test to make it pass with learn, and then learn submit it.

remove lab requirement

@aturkewi could you remove the requirement for this to be a lab.

Can't "npm start" lab in Learn IDE on Windows

Can't run the lab on the Learn IDE by using npm start, even after opening/forking it.
Using Windows 10.

The error thrown is:

npm start                                                                                      
                                                                                                    
> [email protected] start /home/edmundo096/code/labs/react-redux-create-store-c
b-gh-000                                                                                            
> node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js                                  
                                                                                                    
events.js:160                                                                                       
      throw er; // Unhandled 'error' event                                                          
      ^                                                                                             
                                                                                                    
Error: getaddrinfo ENOTFOUND localhost                                                              
    at errnoException (dns.js:28:10)                                                                
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:76:26)                                   
                                                                                                    
npm ERR! Linux 4.4.0-75-generic                                                                     
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"                                              
npm ERR! node v6.10.1                                                                               
npm ERR! npm  v3.10.10                                                                              
npm ERR! code ELIFECYCLE                                                                            
npm ERR! [email protected] start: `node ./node_modules/webpack-dev-server/bin/w
ebpack-dev-server.js`                                                                               
npm ERR! Exit status 1                                                                              
npm ERR!                                                                                            
npm ERR! Failed at the [email protected] start script 'node ./node_modules/webp
ack-dev-server/bin/webpack-dev-server.js'.                                                          
npm ERR! Make sure you have the latest version of node.js and npm installed.                        
npm ERR! If you do, this is most likely a problem with the introduction-to-react-assessment package,
.........

No local test

@aturkewi @Lukeghenco

Hey guys! This lab was built with no local test. Local test light won't flip :). Just a fyi!

Thanks!