标签: react-redux

错误:捆绑失败:错误:无法解析模块./../../react-transform-hmr/lib/index.js从/ReactNative/UsermanagementNav/src/App.js:模块./../../react-transform-hmr/lib/index.js无法从找到/ReactNative/UsermanagementNav/src/App.js.

我曾尝试使用安装react-native-transform-hmr

npm i react-native-transform-hmr

但它并没有解决我的问题.我正在使用react-native 0.57.2并且反应为16.5.0

我用create-react-app引导我的应用程序，当我运行我的应用程序时，它编译时发出警告，并在浏览器上引发错误。

编译时出错

./node_modules/rc-picker/node_modules/moment/src/lib/locale/locales.js
Module not found: Can't resolve './locale' in '/Users/macbook/Desktop/projects/pizza/Yummi-fend/node_modules/rc-picker/node_modules/moment/src/lib/locale'

浏览器出错

Error: Cannot find module './locale'
? 2 stack frames were collapsed.
__webpack_require__
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     } …

在进行handleSubmitAjax调用的redux-form 函数中,Ajax中需要一些Redux状态的属性(例如用户ID).

如果我想handleSubmit在表单的组件中定义,这很容易:只需调用mapStateToProps传入我需要的内容,并从this.props我的内容中读取它handleSubmit.

但是,像一个好的React-Redux开发人员一样,我编写了单独的视图组件和容器,因此我的视图组件可以很简单,几乎没有行为.因此,我想在我的容器中定义handleSubmit.

同样,简单 - redux-form被设置为这样做.定义一个onSubmitin mapDispatchToProps,表单将自动调用它.

哦,等等,mapDispatchToProps没有办法访问redux状态.

好的,没问题,我只需要将我需要的道具handleSubmit与表格值一起传递.

嗯,等等,handleSubmit使用这种机制传递任何数据都是不可能的!你得到一个参数,values并且无法添加另一个参数.

这留下了以下没有吸引力的替代方案(我可以验证1和2的工作原理):

1 在表单组件中定义一个提交处理程序,并从那里调用我自己从mapDispatchToProps传入的自定义提交处理函数.这没关系,但要求我的组件知道一些不需要显示表单的redux状态的道具.(此问题不是redux-form独有的.)

dumbSubmit(values)
{
  const { mySubmitHandler, user} = this.props;
  mySubmitHandler(values, user);
}

<form onSubmit={ handleSubmit(this.dumbSubmit.bind(this)) }>

或者,更简洁地说,这可以组合成箭头函数:

<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props.user);}

然后为了使这个处理程序完全不可知,它可以将整个this.props传递回自定义处理程序:

<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props);}

2 在mergeProps中定义onSubmit而不是mapDispatchToProps,因此它可以访问stateProps.Dan Abramov建议不要使用mergeProps(出于性能原因),所以这似乎不是最理想的.

  function mergeProps(stateProps, dispatchProps, ownProps) {
  const { user } …

目标:在加载反应路由器路由时,调度Redux操作,请求异步Saga工作程序获取该路由的基础无状态组件的数据.

问题:无状态组件仅仅是函数,没有生命周期方法,例如componentDidMount,所以我不能(？)从函数内部调度Redux操作.

我的问题部分与将有状态React组件转换为无状态功能组件有关:如何实现"componentDidMount"类功能？,但我的目标是仅发送一个Redux动作,要求将数据异步填充到商店(我使用Saga,但我认为这与问题无关,因为我的目标是仅发送一个普通的Redux动作),之后由于数据支柱的改变,无状态组件将重新渲染.

我正在考虑两种方法:使用react-router的一些功能,或Redux的connect方法.是否有一种所谓的"反应方式"来实现我的目标？

编辑:到目前为止我唯一提出的解决方案是在mapDispatchToProps中调度动作,这样:

const mapStateToProps = (state, ownProps) => ({
    data: state.myReducer.data // data rendered by the stateless component
});

const mapDispatchToProps = (dispatch) => {
    // catched by a Saga watcher, and further delivered to a Saga worker that asynchronically fetches data to the store
    dispatch({ type: myActionTypes.DATA_GET_REQUEST });
    return {};
};

export default connect(mapStateToProps, mapDispatchToProps)(MyStatelessComponent);

然而,这似乎有点脏,而不是正确的方式.

我读取componentDidMount只被调用一次初始渲染,但我看到它被渲染多次.

看来我创建了一个递归循环.

• componentDidMount调度操作以获取数据
• 在接收数据时,它触发成功动作以将数据存储在redux状态.
• 父反应组件连接到redux存储,并具有mapStateToProps刚刚在上述步骤中更改的条目
• parent呈现子组件(通过变量以编程方式选择)
• 再次调用子组件的componentDidMount
• 它会分析获取数据的操作

我认为这就是发生的事情.我可能错了.

我怎么能停止循环？

这是以编程方式呈现子组件的代码.

 function renderSubviews({viewConfigs, viewConfig, getSubviewData}) {

   return viewConfig.subviewConfigs.map((subviewConfig, index) => {
     let Subview = viewConfigRegistry[subviewConfig.constructor.configName]
     let subviewData = getSubviewData(subviewConfig)

     const key = shortid.generate()
     const subviewLayout = Object.assign({}, subviewConfig.layout, {key: key})
     return (
       <div
         key={key}
         data-grid={subviewLayout}
         >
         <Subview
           {...subviewData}
           />
       </div>
     )
   })
 }

我正在尝试以编程方式使用,this.props.history.push(..)但它似乎不起作用.

这是路由器:

import {
 BrowserRouter as Router,
 Route
} from 'react-router-dom';

<Router>
 <Route path="/customers/" exact component={CustomersList} />
 <Route path="/customers/:id" exact component="{Customer} />
</Router>

在CustomerList中,呈现客户列表.单击客户(li)应该将应用程序路由到客户:

import { withRouter } from 'react-router'

class Customers extends Component {
  static propTypes = {
    history: PropTypes.object.isRequired
  }

 handleCustomerClick(customer) {
   this.props.history.push(`/customers/${customer.id}`);
 }

 render() {
   return(
    <ul>
      { this.props.customers.map((c) =>
        <li onClick={() => this.handleCustomerClick(c)} key={c.id}>
          {c.name}
        </li> 
    </ul>
  )

 }
}

//connect to redux to get customers

CustomersList = withRouter(CustomersList);
export default CustomersList;

代码是部分的,但完全说明了情况.发生的情况是浏览器的地址栏相应地更改为history.push(..),但视图未更新,Customer组件未呈现且CustomersList仍然存在.有任何想法吗？

我不是 Javascript 专家，所以我想知道是否有人有一种“优雅”的方式来组合多个减速器来创建全局状态（如 Redux）。当一个状态更新多个组件等时不影响性能的功能。

假设我有一个 store.js

import React, { createContext, useReducer } from "react";
import Rootreducer from "./Rootreducer"

export const StoreContext = createContext();

const initialState = {
    ....
};

export const StoreProvider = props => {
  const [state, dispatch] = useReducer(Rootreducer, initialState);

  return (
    <StoreContext.Provider value={[state, dispatch]}>
      {props.children}
    <StoreContext.Provider>
  );
};

Rootreducer.js

import Reducer1 from "./Reducer1"
import Reducer2 from "./Reducer2"
import Reducer3 from "./Reducer3"
import Reducer4 from "./Reducer4"

const rootReducer = combineReducers({
Reducer1,
Reducer2,
Reducer3,
Reducer4
})

export default rootReducer;

随着新的 NextJS 13 引入app目录，redux 仍然有意义吗？

按照下一个文档，已经可以将 redux 提供程序包装在客户端组件周围。但是与 redux 共享状态将如何影响 Next 性能和优化？

接下来的文档要求在需要数据的地方获取数据，而不是向下传递组件树。请求将被自动删除重复数据。

我对 Redux 的用途是控制应用程序中我希望保持一致的某些部分。

例如：如果我更改用户名，我希望它反映在需要该数据的整个应用程序中。

将组件添加到入口点时出现问题，此错误立即在此处弹出，该如何解决？我也尝试仅添加Main组件，但是无论如何我都会遇到该错误，在main.jsx中，仅带有渲染方法的类返回“ hello world”

_react.default.createContext is not a function

_react.default.createContext is not a function

Webpack配置

'use strict';

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'src/app.jsx')
  ],
  resolve: {
    root: [
      path.resolve(__dirname, "src"),
    ],
    extensions: ['', '.js', '.jsx', '.css']
  },
  output: {
    path: path.join(__dirname, '/public/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.tpl.html',
      inject: 'body',
      filename: 'index.html'
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new …

最近我正在阅读 react-redux 文档https://react-redux.js.org/next/api/hooks 并且有一个与平等比较和更新相关的部分，它说：

多次调用 useSelector()，每次调用返回一个字段值。

第一种方法：

const { open, importId, importProgress } = useSelector((importApp) => importApp.productsImport);

第二种方法：

const open = useSelector((importApp) => importApp.productsImport.open);
const importId = useSelector((importApp) => importApp.productsImport.importId );
const importProgress = useSelector((importApp) => importApp.productsImport.importProgress);

那么有什么真正的区别吗？或者由于破坏 useSelector 钩子会在检查引用时遇到麻烦？