解释Redux语法

Explain Redux syntax

本文关键字：语法 Redux 解释      更新时间：2024-01-21

我是redux的新手，对它的语法感到困惑。

在教程-02_about-state-and-meet-redux中，我看到

import { createStore } from 'redux'
var store = createStore(() => {})

我很惊讶：

  1. 没有;，就像python

  2. 什么是() => {}？

  3. 导入遵循什么规则？

  4. Redux使用的语法是什么？

Frontend javascript没有这样的语法，我还查看了node.js：节点入门书，它也不一样。

搜索redux grammar结果一无所获。

这是javascript，但它使用了最新规范（称为ES6或ES2015）引入的许多前沿功能。由于即使是现代浏览器也不完全支持它，所以应该使用像babel这样的转发器来发送代码。

你可以在这里和这里阅读更多关于ES6的信息。

否，类似python

JavaScript中不需要分号。就我个人而言，我总是使用它们。你可以找到一些很好的文章来讨论分号的积极性和消极性。

什么是（）=>｛｝

正如其他人所提到的，这是ES6（也称为ES2015）语法，并定义了一个函数。它们有时被称为箭头函数，您可以在这里阅读更多关于它们的信息。

因此（a）=>{return a*2；}等价于函数（a）{return a*2；}

导入遵循什么规则

导入类似于要求。你可以在这里阅读有关它和出口的信息。它们是es6/es2015模块语法的一部分。

浏览器还不直接支持es6/es2015。然而，像BabelJS和Traceur这样的transfiler的使用允许您今天使用它。我强烈建议你花点时间使用它。它对我更好地理解例子很有帮助。我发现它是一个更干净的语法，但这是学习它的一个更主观的原因redux的

createStore函数，获取combineReducers返回的reducer，并返回可访问Providers中定义的组件的状态。

示例代码看起来像。。

import allReducers from './YOUR_REDUCER_DIRECTORY'
var store = createStore(allReducers);
<Provider store = store>
 <YOUR_COMPONENT i.e. HEADER/>
</Provider>

在这里，您的组件可以访问该状态。可以在减速器中定义初始状态。

简化了这里的语法：

const createStore = require('redux').createStore;
var store = createStore(function () {}) // This takes your reducer and the middlewares

这些是ES6语法，相当于下面的简单语法：

import { createStore } from 'redux';
function actionCreator (){
 ......
}
var store = createStore(action_creator);

这里，从redux只导入createStore函数，函数createStore以actionCreator为参数，创建store。

相关文章：