redux | 易学教程

firebase set failed first argument contains undefined in property

阅读更多关于 firebase set failed first argument contains undefined in property

问题 When I create an event, I do this: export const eventCreate = ({ title, time, location }) => { const newPostKey = firebase.database().ref('/events').push().key; const update = {}; const postDetails = { eventId: newPostKey, title, ... goingNumber: 1, ... }; update[`/events/${newPostKey}`] = postDetails; return (dispatch) => { firebase.database().ref() .update(update) .then(() => { dispatch({ type: EVENT_CREATE }); }) .then(() => newPostKey); }; }; in the database: later when I try to update

24.redux

阅读更多关于 24.redux

Flux:Flux 是一种架构思想 https://facebook.github.io/flux/ 官网资料: http://www.ruanyifeng.com/blog/2016/01/flux.html Redux: Redux 由 Flux 演变而来，但受 Elm 的启发，避开了 Flux 的复杂性。不管你有没有使用过它们，只需几分钟就能上手 Redux。 Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 (如果你需要一个 WordPress 框架，请查看 Redux Framework。) 可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。 Redux 除了和 React 一起用外，还支持其它界面库。它体小精悍（只有2kB，包括依赖）。 https://redux.js.org/ 官网 http://www.redux.org.cn/ 中文资料: https://segmentfault.com/a/1190000011474522 Vuex: view <------> store ------------->actions | disptach | 组件 | | view --------->| |commit | |

Getting 400 error Bad request using axios

阅读更多关于 Getting 400 error Bad request using axios

问题 I am using axios and getting a 400 bad request error. I am using react-redux and trying to send a post request to localhost:3000/posts. Here is the code that I am using. import axios from 'axios'; import { GET_ALL_POSTS, GET_POST, CREATE_POST, DELETE_POST, UPDATE_POST } from './types'; const ROOT_URL = 'http://localhost:3000'; export function createPost({content, title}, cb) { return function(dispatch) { axios.post(`${ROOT_URL}/posts`, {content, title}) .then((response) => { console.log

MERN stack webapp showing blank screen Android-mobile browser, as React-Redux frontend, Node-Express backend

阅读更多关于 MERN stack webapp showing blank screen Android-mobile browser, as React-Redux frontend, Node-Express backend

问题 I have built up WebApp in MERN stack with MongoDB, Express, React, Nodejs. I hosted it to Heroku-Cloud as https://connectgeeks.herokuapp.com. Github-repo of the project- Find_Geeks. it works on my Desktop browsers but can't run on any Android chrome. I have an auto-build app in Heroku cloud with command in package.json as "scripts:{ "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend" } when it loads on android, it's search bar

Redux security - Is it possible to access store data?

阅读更多关于 Redux security - Is it possible to access store data?

问题 I'm making an app which holds sensitive information about the user. This data is held in the store and is used throughout the app, on different views. The session can expire, with the store being completely cleared if the user tries to navigate to another route after a timeout. However, the store is not cleared until the user navigates to a new route. Let's say the user leaves their machine without logging out. The session times out but the page is still there and the store is yet to be

Structuring the store of a localized react / redux app

阅读更多关于 Structuring the store of a localized react / redux app

问题 I am having a hard time structure my data in a localized blogging app. My app is displaying posts, with embedded pictures (one-to-many), in three languages (English, French and Russian). The visitor can choose its locale. The editors can edit the localized versions of their posts in the three languages. For the moment, the structure of my store looks like this: { articles: { en: { 1: { id: 1, title: "my first title", body: "my first body", picture_ids: [1, 2, 3]}, 2: { id: 2, title: "my

Why should I use Redux in Angular as far as Angular is two-way data binding?

阅读更多关于 Why should I use Redux in Angular as far as Angular is two-way data binding?

问题 As far as I understand Redux is mainly intended to enable the two-way data binding in a javascript app. This is very usefull for frameworks that are not two-way data binding, as React for instance. But why using it in Angular that is already natively two-way data binding ? To illustrate my question here is the code that I use in native Angular to make a store that enables the communication of a variable state between two Angular components : 1) The store import { Injectable } from '@angular

Using webpack and react-router for lazyloading and code-splitting not loading

阅读更多关于 Using webpack and react-router for lazyloading and code-splitting not loading

问题 I'm working on moving my react v0.14 + redux v3.0 + react-router v1.0 codebase from client-side rendering to server-side rendering using webpack v1.12 to bundle and code-split into chunks to load routes and components on-demand. Im following and basing my setup on https://github.com/rackt/example-react-router-server-rendering-lazy-routes as I think it provides simplicity and great utilities. All day yesterday I have been working on moving to server-side rendering but I run into a few issues I

Why is my context.router undefined in my react component?

阅读更多关于 Why is my context.router undefined in my react component?

问题 I am trying to access my router from within my component and it is undefined. Here is my router : React.render( <Provider store={store}> {() => <Router> <Route path="/" component={LoginContainer} /> </Router> } </Provider>, document.getElementById('app') ); Here is the container: class LoginContainer extends React.Component { constructor() { super(); } static propTypes = { handleLogin: PropTypes.func.isRequired } static contextTypes = { router: React.PropTypes.object } handleLogin() { this

Redux的工作流程

阅读更多关于 Redux的工作流程

Redux = Reducer + Flux。react在2013年开源的时候，facebook的团队除了放出react这个框架之外，他还放出了一个框架，叫做flux。flux这个框架实际上就是官方推出的最原始的辅助react使用的数据层框架。当然在他推出之后，业界的人在使用之后发现flux实际上有一些缺点。比如说他的公共存储区域store这个部分可以有很多个store所组成。这样的话，数据存储的时候，就可能存在一个数据依赖的问题。总之他不是特别的好用，于是有人，就把flux做了一个升级，升级成了我们目前使用的redux。在redux里面除了借鉴flux以前很多的设计理念之外呢，他又引入了一个reducer的概念。因为flux这个框架实际上目前已经有些过时了。所以就没必要去在意他的一些细节点了。看上图，react components指的是页面上的每个组件。store指的是存储数据的公共区域。那么action creators 和 reduces又是什么？我们可以把react components当作是一个借书的用户。那么action creators就是我们要对管理说的要借什么书的那句话。store是图书馆的管理员，他接收到了要借什么书的一个信号，但是他没有办法知道图书馆的所有存储情况。可是他有一个记录本叫reducer，他通过查看记录本上的信息，知道这个书在哪