redux

React和Redux的连接react-redux

由 南笙酒味 提交于 2020-01-27 07:57:31
之前一直在探索React相关的东西，手上有个SPA项目，于是准备上Redux试试水。Redux本身和React并没有之间的关联，它是一个通用Javscript App模块，用做App State的管理。要在React的项目中使用Redux，比较好的方式是借助react-redux这个库来做连接，这里的意思是，并不是没有react-redux，这两个库就不弄一起用了，而是说react-redux提供了一些封装，一种更科学的代码组织方式，让我们更舒服地在React的代码中使用Redux。 之前仅通过Redux文档来了解react-redux，在一段时间的实践后准备翻一翻源代码，顺便做些相关的总结。我看的代码的npm版本为 v4.0.0 ，也就是说使用的React版本是0.14.x。 react-redux提供两个关键模块：Provider和connect。 Provider Provider这个模块是作为整个App的容器，在你原有的App Container的基础上再包上一层，它的工作很简单，就是接受Redux的store作为props，并将其声明为context的属性之一，子组件可以在声明了 contextTypes 之后可以方便的通过 this.context.store 访问到store。不过我们的组件通常不需要这么做，将store放在context里

Uncaught Error: Actions must be plain objects?

由 ぐ巨炮叔叔 提交于 2020-01-25 21:27:46
问题 Uncaught Error: Actions must be plain objects. Use custom middleware for async actions..... Action file: import $ from 'jquery' import { phoneVerify } from '../actions/types' const verifyPhoneAsync = function (verification) { return { type: phoneVerify, payload: verification } } const verifyPhone = function (phone) { $.ajax({ url: 'api', type: 'POST', data: { mobile: phone }, dataType: 'json', success: (data) => { console.log(data) } }) } const verifyOtp = function (phone, otp) { return

Why am I not able to route my app? react - react-router - redux-router

由 好久不见. 提交于 2020-01-25 11:53:07
问题 I have a simple redux/react app and I am only able to route to the root / . I am using react 0.14 , redux 3.0.2 , react-router 1.0.0-rc-3 and redux-router1.0.0-rx-3 . Here is my app: import React from 'react'; import ReactDOM from 'react-dom'; import { Route} from 'react-router'; import { Provider } from 'react-redux'; import { ReduxRouter } from 'redux-router'; import store from './store/lcrf.store.js'; import App from './containers/App'; import Test from './containers/Test'; ReactDOM.render

better way to return states within nested objects in a reducer

由 守給你的承諾、 提交于 2020-01-25 09:42:25
问题 I'm retrieving data from a backend, the data structure is like this. Data Strucuture { "id": 154, "image_title": "iiisdd", "img_url": "*********", "created_at": "2019-07-18T19:44:49.805Z", "updated_at": "2019-07-18T19:44:49.805Z", "user_id": 1, "user": { "id": 1, "googleId": null, "username": "*******, "password": "$********", "email": "e*******", "created_at": "2019-06-23T18:57:17.253Z", "updated_at": "2019-06-23T18:57:17.253Z" }, "comments": [ { "id": 51, "comment_body": "owls life",

How to configure passport facebook using react-redux?

由 大兔子大兔子 提交于 2020-01-25 08:13:25
问题 I am trying to implement redux with passport facebook strategy. My action works fine i.e, it gets to the backend route and gets the data if I pass a random object. However if in the same route I try to write passport.authenticate('facebook') , it prompts me with the following error in redux: "Error: Network Error at createError (http://localhost:3000/static/js/0.chunk.js:7219:15) at XMLHttpRequest.handleError (http://localhost:3000/static/js/0.chunk.js:6762:14)" I have also initialized

How to use redux state with react hooks

由 孤街醉人 提交于 2020-01-25 06:44:28
问题 So we recently decided to start using hooks in our current react app. We are using redux for state management and my question was how does this work with hooks? I've read some articles where people use the context api with hooks to create a state manager but I would like to keep using redux for now. I know the react api has a useReducer method, can this be used to dispatch redux actions? I've been looking for a tutorial/example but can't seem to find any resources online for this. I may be

react：生态以及实际项目选择

由 ∥☆過路亽．° 提交于 2020-01-24 19:42:08
react 的生态在web端，移动端，服务器端，VR领域都有涉及。 react本身是面向web端的，它很轻便灵活，只是MVC架构中的view(视图)层。由于只是view层，所以它需要配合生态体系中的其他框架或模块来使用。 以下选择都是 github 上 star 最多的。 必备 路由 react-router 状态管理 redux，react-redux，dva redux 和 react-redux 的区别： redux是独立的应用状态管理工具。它是可以独立于react之外的。如果我们需要在react当中运用它，那么我们需要手动订阅store的状态变化，来对我们的react组件进行更新。那么react-reudx这个工具，就帮我们实现了这个功能，我们只需对store进行处理，react组件就会有相应的变化。 Redux提供的API: store, action, reducer react-redux提供的API: connect: 将store作为props注入 Provider: 使store在子孙组件的connect中能够获取到。 集成 另外国内蚂蚁金服前端团队基于redux, react-router打造了另一个前端框架——dva。 如果你选择redux方案，那么建议直接使用dva。 UI库 ant design，ant design pro（开箱即用的管理系统） umi

react-router v4 dispatch redux action on page change

由 这一生的挚爱 提交于 2020-01-24 15:56:47
问题 I would like an action to be dispatched and then intercepted by the reducers on every react-router page change. My use case is: I have the page state persisted in redux store. The state is represented as {loading, finished} . When the user clicks a button, a request is made to the server and loading becomes true . When the response comes back positive loading becomes false and finished becomes true . When the user navigates away from the page, I want the state to be reset to its initial

Passing initial state from API call to createStore when react native application boots up

由 喜你入骨 提交于 2020-01-24 14:22:27
问题 I am having trouble initialising my redux-state when my react-native application boots up. I need to make an api call before the application boots up to retrieve data to hydrate my state. Id like to pass the result of this call to the createStore function in my Provider JSX element. I have read different things about how to do that but none of them seems to work. Here's my root App component : import React, { Component } from 'react'; import { View } from 'react-native'; import { Provider }

Passing initial state from API call to createStore when react native application boots up

由 末鹿安然 提交于 2020-01-24 14:21:26
问题 I am having trouble initialising my redux-state when my react-native application boots up. I need to make an api call before the application boots up to retrieve data to hydrate my state. Id like to pass the result of this call to the createStore function in my Provider JSX element. I have read different things about how to do that but none of them seems to work. Here's my root App component : import React, { Component } from 'react'; import { View } from 'react-native'; import { Provider }
订阅 redux