一、获取数据store.getState()

二、修改数据 store.dispatch(action)


src/store/index.js

import { createStore } from 'redux'  //  引入方法
import reducer from './reducer'    
const store = createStore(reducer) // 创建数据存储仓库
export default store   
src/store/reducer.js
 
const defaultState = {
    num : 1
function fn (state = defaultState,action){
       state = JSON.parse(JSON.stringify(state)) //深度拷贝state
       switch (action.type) {
           case "NUM":
            state.num = action.num
               return state;
           default:
               return state;
const state=fn
export default state
组件使用：
 src/views/a.js
 
import React from 'react'
import store from '../store/index' 
class A extends React.Component {
constructor(props){
  super(props)
  this.state=store.getState();
  this.storeChange = this.storeChange.bind(this)  
  store.subscribe(this.storeChange)
changeInputValue(e){
  if(e.target.value){
    const action ={
      type:'NUM',
      num:JSON.parse(e.target.value)
    store.dispatch(action)
  }else{
    const action ={
      type:'NUM',
      num:e.target.value
    store.dispatch(action)
storeChange(){
  this.setState(store.getState())
addClick(){
  var count=this.state.num +1
  const action ={
    type:'NUM',
    num:count
store.dispatch(action)
reduceClick(){
  var count=this.state.num -1
  const action ={
    type:'NUM',
    num:count
store.dispatch(action)
render() {
    return (
          <button onClick={this.reduceClick.bind(this)}>减1</button>
          <input value={this.state.num} type="number" onChange={this.changeInputValue}/>
          <button onClick={this.addClick.bind(this)}>加1</button>
      </div >
export default A
补充：
 1、bind(this) 解决:如果传递一个函数名给一个变量，然后通过在变量后加括号()来调用这个方法，此时方法内部的this的指向就会丢失。
 2、主要用subscribe监听store,当store中数据发生变化就会更新数据 。
 3、JSON.parse(JSON.stringify(state)) ，关于深度拷贝可去参考这位兄台的博客
                    一、获取数据store.getState()二、修改数据 store.dispatch(action)src/store/index.jsimport { createStore } from 'redux'  //  引入方法import reducer from './reducer'    const store = createStore(reducer) // 创建数据存储仓库export default store   src/store/reducer.jsconst de
调用store.dispatch(action)。
	Redux store 调用传入的 reducer 函数。
	根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。
	Redux store 保存了根 reducer 返回的完整 state 树。
				
1、为什么要用redux
在React中，数据在组件中是单向流动的，数据从一个方向父组件流向子组件（通过props）,所以，两个非父子组件之间通信就相对麻烦，redux的出现就是为了解决state里面的数据问题
2、Redux设计理念
Redux是将整个应用状态存储到一个地方上称为store,里面保存着一个状态树store tree,组件可以派发(dispatch)行为(action)给store,而不是直接通知其他组件，组件内部通过订阅store中的状态state来刷新自己的视图。
redux提供createStore这个函数，用来生成Store
import { createStore } from 'redux';
const store = createStore(fn);
上面代码中，createStore函数接受另一个函数作为参数，返回




    

				
默认情况下，Redux 只能处理同步数据流。实际开发中，状态的更新、获取，通常是使用异步操作，可以通过 Redux中间件来实现
作用：处理具有副作用（side effect）的功能
优点：可以串联、组合，在一个项目中使用多个中间件
执行时机：在 dispatching action 和 reducer 之间
没有中间件：dispatch(action) ==> reducer
使用中间件：dispatch(action) ==> 执行中间件代码 ==> reducer
				
今天学习了阮一峰大大的react-redux的store API ，有一些理解不知道对不对，记一下笔记
store.getState()    拿到当前时刻的state
store.dispatch()    可以设置，修改state的值
store.subscribe()  设置监听函数，一旦 State 发生变化，就自动执行这个函数。
工作流程1.首先，用户发出 Action。store.dis
				
在上一篇博客里，如果两个子节点要共享数据，就必须把公共数据放到最近公共祖先里，redux的作用就是单独有一块区域可以用来存放公共数据，可以看成全局变量
**redux将所有数据存储到树中，且树是唯一的。**每一个结点都会有一个值Redux基本概念代码示例：(维护一个结点）
代码示例：(维护两个结点）
React-Redux基本概念安装
App组件下面两个子节点 Number组件(number.jsx)和String组件(string.jsx)
state树包含number和string两个结点，在文
				
所谓redux，其实就是一个独立的库，跟框架没有很大关系，它专注于状态管理，整体只有一个对象，单向数据流处理，核心主要是store,reducer,action,state.下面就来看下应用
首先要下载redux，就是cnpm i redux，然后
import {createStore} from 'redux';
const ADD='增加';
const SUB='减少';
func...
				
在React中使用this.props.dispatch调用后端接口，也需要借助redux-thunk中间件来处理异步操作。下面是一个简单的例子：
```javascript
// 定义一个异步action creator
export const fetchData = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    try {
      const response = await fetch('/api/data');
      const data = await response.json();
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
// 在组件中使用dispatch调用异步action creator
import { connect } from 'react-redux';
import { fetchData } from './actions';
class MyComponent extends React.Component {
  componentDidMount() {
    // 调用异步action creator
    this.props.dispatch(fetchData());
  render() {
    // 根据store中的状态渲染组件
    const { isLoading, data, error } = this.props;
    if (isLoading) {
      return <div>Loading...</div>;
    } else if (error) {
      return <div>Error: {error.message}</div>;
    } else {
      return (
            {data.map(item => (
              <li key={item.id}>{item.name}</li>
const mapStateToProps = state => ({
  isLoading: state.isLoading,
  data: state.data,
  error: state.error,
export default connect(mapStateToProps)(MyComponent);
在上面的例子中，fetchData是一个异步action creator，它返回一个函数，这个函数接收一个参数：dispatch。在函数内部，我们可以使用dispatch方法来分发多个同步action，以更新store中的状态。在组件中，我们通过connect函数将store中的状态映射为props属性，然后在componentDidMount中使用this.props.dispatch调用该方法，以触发异步操作。当异步操作完成后，根据store中的状态渲染组件。
                npm ERR! Could not install from “Files\nodejs\node_cache\_npx\10184“ as it does not contain a packag
                    叫花子live: 
                    还真是！救我狗命！搞了半天终于搞完了
                微信小程序中 设置全局变量、使用、修改设置
                    hap_5871: 
                使用变量process.env.VUE_APP_BASE_API
                    zhouzhou1213_: 
                    为啥我的取不到呢