0

I am new to redux, and feel confused with its syntax.

In Tutorial - 02_about-state-and-meet-redux, I see

import { createStore } from 'redux'

var store = createStore(() => {})

I'm surprised that:

  1. No ; , like python

  2. What is () => {}?

  3. Import follow what rule?

  4. What is the syntax Redux is using?

Frontend javascript doesn't have such syntax, and I also check node.js: The Node Beginner Book which is different too.

Search for redux grammar result nothing.

Emmanuel
  • 13,935
  • 12
  • 50
  • 72
Mithril
  • 12,947
  • 18
  • 102
  • 153
  • 1
    See ES6 and above. They support somethings that ES5 doesn't. – Dan D. Apr 05 '16 at 07:29
  • 2
    The missing `;` is not ES5, ES6 or anything else. They are "optional" in JS since the first version but not using them is plain lazy and can lead to really hard to debug code. Read this: http://stackoverflow.com/questions/444080/do-you-recommend-using-semicolons-after-every-statement-in-javascript – Sergiu Paraschiv Apr 05 '16 at 07:42

5 Answers5

5

That's javascript, but it's using many bleeding edge features introduced by the latest specs (known as ES6 or ES2015). Since it's still not fully supported even by modern browsers you should use a transpiler like babel to ship your code.

You can read more about ES6 here and here.

Ingro
  • 2,841
  • 5
  • 26
  • 42
2

No ; , like python

Semicolons are not required in JavaScript. Personally, I always use them. You can find some good articles that discuss the positives and negatives of semicolons.

What is () => {}?

As mentioned by others, this is ES6 (also known as ES2015) syntax, and defines a function. They are sometimes called arrow functions, and you can read more about them here.

So (a) => { return a*2; } is equivalent to function(a) { return a*2; }

Import follow what rule?

Import is similar to require. You can read about it here and about export here. They are part of the es6/es2015 module syntax.

es6/es2015 is not supported directly by browsers yet. However, the use of transpilers like BabelJS and Traceur allow you to use it today. I highly recommend that you invest some time using it. It has served me well to better understand examples. I find it to be a cleaner syntax, but that is a more subjective reason to learn it.

Bill Kidwell
  • 280
  • 2
  • 9
0

Those are ES6 syntax and equivalent to below simple syntax:

import { createStore } from 'redux';

function actionCreator (){
 ......
}

var store = createStore(action_creator);

here, importing only createStore function from redux and function createStore take actionCreator as parameter and create store.

ArunValaven
  • 1,753
  • 2
  • 25
  • 44
Ariful Islam Rajib
  • 37
  • 4
0

createStore function from redux, takes reducer returned by combineReducers and return a state accessible to the components defined in the Providers.

A sample code will look like..

import allReducers from './YOUR_REDUCER_DIRECTORY'
var store = createStore(allReducers);

<Provider store = store>
 <YOUR_COMPONENT i.e. HEADER/>
</Provider>

here the state will be accessible to your component. An initial state can be defined in reducers.

saurabh_garg
  • 86
  • 1
  • 7
0

Simplified the syntax here you go :

const createStore = require('redux').createStore;
var store = createStore(function () {}) // This takes your reducer and the middlewares
Nitin Tulswani
  • 309
  • 3
  • 5