标签: react-redux

我有这个:

const ProjectsSummaryLayout = ({projects}) => {
   return (
      <div className="projects-summary col-md-10">
          <h3>Projects</h3>
          <ul>
              { projects.map(p => <li key={p.id}>{p.contract.client}</li>) }
          </ul>
      </div>
   )
}

const ProjectsSummary = connect(
   state => ({projects: state.projects})
)(ProjectsSummaryLayout)

我得到:

警告:无法为无状态函数组件提供refs(请参阅Connect(ProjectsSummaryLayout)创建的ProjectsSummaryLayout中的ref"wrappedInstance").尝试访问此参考将失败.

它试图告诉我什么？我实际上做错了吗？

我在这里看到关于这个的讨论,但不幸的是我根本不理解结论.

我一直在阅读一些redux教程,说实话我直到现在还没有看到它带来的明显反应的附加价值.

据我所知,我可以构建一个应用程序并仅使用反应来管理其状态,那么,什么使得redux值得使用？

好吧,我确实认识到redux比反应有一些优势,即:

• 跟踪所执行的所有行动;
• 由于前一点,使调试更容易;
• 防止状态在组件之间传递下来/向上.

但也许由于我缺乏构建大型应用程序的经验,我不相信它会让我的生活变得更轻松.

你能详细说明使用redux而不是普通反应的优点吗？

未处理的拒绝(错误):操作必须是普通对象.使用自定义中间件进行异步操作.

详细信息:我想在每个帖子中添加评论.因此,当运行获取帖子时,我想为所有帖子调用fetch comment API.

这是我的代码:

export function bindComments(postId) {
  return API.fetchComments(postId).then(comments => {
    return {
      type: BIND_COMMENTS,
      comments,
      postId
    }
  })
}

谢谢

在我的 Redux 存储中，我有多个切片，我想访问langspeciesSlice 内的settingsSlice 的状态。

这是我的切片的代码示例：

const settingsSlice = createSlice({
  name: 'settings',
  initialState: { lang: 'en', theme: 'dark' },
  reducers: {
    ...
  },
});

const speciesSlice = createSlice({
  name: 'species',
  initialState: data[`vds-list-${HERE I WANT TO USE THE "lang" STATE OF THE SETTINGSSLICE}`],
  reducers: {
    ...
  },
});

到目前为止我还没有找到解决方案，所以也许这是不可能的？

我可以只使用一个切片，其中包含所有状态，但我真的很想将状态的不同部分分隔在不同的切片中。

我正在使用React和React Router与Redux建立网站.许多路由(页面)需要登录.如果用户未登录,我可以重定向到登录:

function requireAuth(nextState, replace) {
    let loggedIn = store.getState().AppReducer.UserReducer.loggedIn;

    if(!loggedIn) {
        replace({
            pathname: '/login',
            state: {
                nextpathname: nextState.location.pathname
            }
        });
    }
}

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App}>
                <IndexRoute component={Index} />
                <Route path="login" component={Login} />
                <Route path="register" component={Register} />
                <Route path="dashboard" component={Graph} onEnter={requireAuth}>
                    ... some other route requires logged in ...
                </Route>
            </Route>
        </Router>
    </Provider>,
    document.getElementById('entry')
);

如果用户没有登录,请查看代码,我使用onEnter挂钩重定向到'/ login'路由.用于检查用户登录的数据是在商店中,并且在用户登录后它将更新.

它工作得很好,但问题是当我刷新页面时,存储将被重置并且用户没有登录状态.

我知道这是因为Redux存储只是内存存储,所以refesh页面会丢失所有数据.

检查服务器会话每次刷新都可以工作,但这可能是太多的请求,所以这看起来不错.

将登录状态数据保存到localStorage可能有效,但在这种情况下,我应该检查每个AJAX调用失败该请求被拒绝,因为会话已过期或不存在像某些东西,这看起来也是个坏主意.

有没有办法更清楚地解决这个问题？我的网站将会使用很多人,所以我希望尽可能减少XHR呼叫.

任何建议将非常感谢.

我正在使用带有redux形式和材料ui的电子反应样板创建一个上传文件的简单表格.

问题是我不知道如何创建输入文件字段,因为材料ui不支持上传文件输入.

关于如何实现这一点的任何想法？

当我更新我的网站时,运行npm run build并将新文件上传到服务器我仍在查看我的网站的旧版本.我的项目的回购是 https://github.com/Alfrex92/serverlessapps

没有React,我可以看到我的网站的新版本缓存破坏.我这样做:

上一个文件

<link rel="stylesheet" href="/css/styles.css">

新文件

<link rel="stylesheet" href="/css/styles.css?abcde">

我怎么能做这样的事情或用create react app实现缓存清除？

在创建的github中有许多线程对此做出反应,但没有人有正确/简单的答案.

我稍微调整了React Router示例,让私有路由与Redux一起玩得很好,但在链接或重定向到其他"页面"时没有呈现任何组件.这个例子可以在这里找到:

https://reacttraining.com/react-router/web/example/auth-workflow

他们的PrivateRoute组件如下所示:

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

但是,因为我已将它合并到Redux应用程序中,所以我不得不稍微调整一下PrivateRoute,以便我可以访问redux存储以及路径Props:

const PrivateRouteComponent = (props) => (
    <Route {...props.routeProps} render={() => (
    props.logged_in ? (
        <div>{props.children}</div>
        ) : (
        <Redirect to={{
            pathname: '/login',
            state: { from: props.location }
        }} /> )
    )} />
);

const mapStateToProps = (state, ownProps) => …

我坚持用redux连接器导出material-ui样式.这是我的代码:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Drawer from 'material-ui/Drawer';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';

const mapStateToProps = state => ({});

const reduxConnector = connect(mapStateToProps, null);
const styles = theme => {
    console.log(theme);
    return ({
        paper: {
            top: '80px',
            boxShadow: theme.shadows[9]
        },
    });
};

class Cart extends Component {

    render() {
        const { classes } = this.props;
        return (
            <Drawer
                open
                docked
                anchor="right"
                classes={{ paper: classes.paper }} …

我正在尝试启动我刚刚从GitHub存储库克隆的redux应用程序.

我尝试使用以下命令运行它

npm start

我收到了这个错误

> react-redux@1.0.0 start /home/workspace/assignment
> webpack-dev-server --config ./configs/webpack/webpack.config.development.js

sh: 1: webpack-dev-server: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! react-redux@1.0.0 start: `webpack-dev-server --config ./configs/webpack/webpack.config.development.js`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the react-redux@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, …