摘要：属性是必须的。需要一个与的一致。必须在的返回原。调试插件日志安装组件。然后加入到中即可例如扩展程序需要在应用市场安装然后在中使用增强功能将加入即可在线实例推荐阅读手稿
React-Redux Redux
Action
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
type 属性是必须的。
Reducer
function todoApp(state = initialState, action) {
switch (action.type) {
case ADD_TODO:
return Object.assign({}, state, {
todo: action.todo
})
default:
return state
}
}
1、需要一个case与action的type一致。
2、必须在switch的defautl返回原state。
Store
管理整个应用的 state
提供getState()方法，可以获取state
通过dispatch(action)设置state
提供subscribe(listener)注册和取消注册监听事件
React-Redux是Redux的React实现,可参考 Official React bindings for Redux.安装
yarn add redux react-redux //or npm i redux react-redxu组件层级划分
表现性组件
只负责显示UI的组件。
例如：
容器性组件
不处理UI的组件，也不处理数据，只为UI组件提供数据的组件。
例如：
connect(state => state)()
其他组件
除以上两种组件以外的组件。
使用Redux我们以一个计数器的例子来说明如何使用React-redux.
设计表现性组件
需要：显示当前计数，默认为0；累加按钮，每次单击加1；递减按钮，每次单击减1；重置按钮，单击将计数设置为0。
import React from "react";
export default ({counter = 0}) => {
const styles = {
display: "flex",
justifyContent: "space-around"
};
return (
当前计数为：{counter}
);
};
设置容器性组件
目的是将表现性组件中的数据抽离出去交给redux管理，然后通过容器性组件将redxu与表现性组件关联起来。
import { connect } from "react-redux";
import CounterIndex from "../components/chapter03/Counter";
export default
connect(state => ({ ...state.counterRedux }))(({ counter, dispatch }) =>
Action
export const COUNTER_ACTION = "COUNTER_ACTION";
export const addActioner = ({counter}) => {
return {type: COUNTER_ACTION, counter: counter + 1};
};
export const subActioner = ({counter}) => {
return {type: COUNTER_ACTION, counter: counter - 1};
};
export const resetActioner = () => {
return {type: COUNTER_ACTION, counter: 0};
};
Reducer
import { COUNTER_ACTION } from "../actions/CounterAction";
export default (state, action) => {
switch (action.type) {
case COUNTER_ACTION:
return { ...state, counter: action.counter };
default:
return state;
}
}
Store
import React from "react";
import { Provider } from "react-redux";
import { createStore } from "redux";
import CounterReducer from "../reducers/CounterReducer";
let store = createStore(CounterReducer);
export default ({ children }) => {children}
Redux 调试插件
console日志
安装redux-logger组件：yarn add redux-logger --dev。
然后加入到redux store中即可：
import { createLogger } from "redux-logger";
store = createStore(reducers, createLogger());
例如：
redux扩展程序
需要在Chrome应用市场安装Redux DevTools.
然后在store中使用增强功能将redux-logger加入即可：
const logger = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(createLogger()); store = createStore(reducers, logger);
在线实例
推荐阅读《React 手稿》
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99110.html
摘要：官方也陈述，接下来的的工作会投入到中。从目前官方的文档可以看出，从以下四个方面来提高的编码。生命周期自定义方法的主要用途是替代之前版本的组件。说明到目前为止，在已发布的版本中有该功能，想体验该功能，必须安装。 React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念，目前还是Proposal阶段。 官方也陈述，接下来的90%的工作会投入到React ...
摘要：相当于一个放置在与中的垫片。之所以称之谓副作用呢，就是为了不让触发一个时，立即执行。也就是在与之间做一个事情，比如异步获取数据等。使用了中的功能，避免了像的回调地狱。把放入中最后再实现相就的即可在线示例推荐阅读手稿 Redux-Saga redux-saga 是一个用于管理应用程序副作用（例如异步获取数据，访问浏览器缓存等）的javascript库，它的目标是让副作用管理更容易，执行更...
摘要：类型检查是为了确保传入组件的参数正确性。通常在项目中可以使用或者来实现。示例以上内容在实现一个通用组件时非常有用。类型检查和参数默认值一起使用，保证组件的正常运行。 Typechecking With PropTypes 类型检查是为了确保传入组件的参数正确性。 通常在项目中可以使用Flow或者TypeScript来实现。 React提供了PropTypes来检查类型。 示例： imp...
摘要：示例使用场景代码复用类似版本之前的。多个组件同用一段代码，或者同样的方法时，可以使用。示例在线示例抽象和更改可以通过包裹的组件公共抽象出来。可以通过包裹的组件传递修改添加等的示例渲然劫持条件渲然。示例反向继承返回的高阶组件类继承了。 Higher-Order Components HOC 不是React的标准API。 HOC 是一个函数。 HOC 返回一个Component。 示例...
摘要：提供了除之外的传参数的方式。是全局跨组件传递数据的。在线示例推荐阅读手稿 Context Context提供了除props之外的传参数的方式。 Context是全局跨组件传递数据的。 API React.createContext const {Provider, Consumer} = React.createContext(defaultValue); Provider ...
阅读 25604·2021-09-29 09:41
阅读 4672·2021-09-10 11:20
阅读 1880·2021-09-09 09:32
阅读 1861·2019-08-30 15:44
阅读 3172·2019-08-29 17:13
阅读 2782·2019-08-29 14:14
阅读 2005·2019-08-29 14:11
阅读 3207·2019-08-29 12:36
