Redux with React Snippets 1.2.0

新的介绍内容：

Redux与React代码片段是专为使用React开发的Redux项目设计的VS Code扩展，通过提供丰富的代码片段，帮助开发者提高开发效率。无论您是使用JavaScript还是TypeScript，都能在开发过程中受益于这些实用的工具。

安装指南：

要安装此扩展，请打开VS Code的命令面板（Ctrl Shift P或Cmd Shift P），输入“Extensions”，然后选择安装新扩展。在扩展市场中搜索“Redux with React Snippets”并点击安装。

支持的语言和文件扩展名：

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)

常用代码片段示例：

• 导入Redux Provider (imrp)： 快速插入Provider组件的导入语句。

  import {Provider} from 'react-redux';$0

• 新建连接的React组件文件 (ncrc)： 生成一个已连接的React组件模板，包含mapStateToProps和mapDispatchToProps等函数。

  import PropTypes from 'prop-types';
  import React from 'react';
  import {connect} from 'react-redux';
  
  const mapStateToProps = state => ({});
  
  const mapDispatchToProps = dispatch => ({});
  
  const mergeProps = (stateProps, dispatchProps, props) => ({});
  
  const ${1:componentName} = ({}) => (
    ${0:<div></div>}
  );
  
  ${1:componentName}.propTypes = {};
  
  export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(${1:componentName});

• 新建Redux模块动作文件 (nrma)： 创建一个包含动作创建函数的文件。

  import {createActions} from 'redux-actions';
  
  export default createActions({
    ${1:moduleName}: {
        $0
    }
  });

• Redux动作创建器 (rma)： 快速生成动作创建器函数。

  ${1:ACTION_NAME}: (${2:value}) => ({$3}),$0

• 新建Redux模块reducer文件 (nrmr)： 创建一个包含reducer函数的文件。

  import {handleActions} from 'redux-actions';
  import * as actions from './actions';
  
  const defaultState = {};
  export default handleActions({
    $0
  }, defaultState);

• 新建Redux选择器文件 (nrms)： 创建一个包含选择器函数的文件。

  import {createSelector} from 'reselect';
  
  const getRoot = state => state$1;$0

• 新建Redux sagas文件 (nrmsg)： 创建一个包含sagas函数的文件。

  import {call, put, select, takeEvery} from 'redux-saga/effects';
  import * as actions from './actions';
  import * as selectors from './selectors';
  
  export default [
    $0
  ];

• 配置Store文件 (cstore)： 生成一个配置Redux Store的文件，包含saga中间件和热更新支持。

  import createSagaMiddleware from 'redux-saga';
  import {createStore, applyMiddleware, compose} from 'redux';
  import reducer from './reducer';
  import sagas from './sagas';
  
  export default (initialState={}, additionalMiddleware = [], composeFunc = compose) => {
    const middleware = [createSagaMiddleware()].concat(additionalMiddleware);
    const store = createStore(
  reducer, initialState, composeFunc(applyMiddleware(...middleware)));
    if (module.hot) {
        module.hot.accept('./reducer', () => {
            const nextRootReducer = require('./reducer').default;
            store.replaceReducer(nextRootReducer);
        })
    }
    return store;
  };

通过这些代码片段，开发者可以大大减少重复代码的编写时间，专注于更重要的业务逻辑，提升开发效率和代码质量。