Redux更新的方法都有什么

Redux是SPA单页面应用程序中多个组件之间共享数据的一种方式。

Redux强调三个基本原则：

• 唯一数据源 ：唯一数据源指的是应用的状态数据应该只存储在唯一的一个Store上。

• 保持状态只读 ： 保持状态只读，就是说不能去直接修改状态，要修改Store的状态，必须要通过派发一个action对象完成。

• 数据改变只能通过纯函数完成 ：这里所说的纯函数就是把Reducer，Reducer描述了state状态如何修改。

# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
cd my-app
# 安装redux
npm install redux --save
​
#1.main.js
import React from 'react'                        // 创建组件、虚拟DOM元素，生命周期
import ReactDOM from 'react-dom'      // 把创建好的 组件 和 虚拟DOM 放到页面上展示的
import { createStore } from 'redux'
​
import App from "./app.jsx"
​
/**
 * 1.创建reducer
   这是一个 reducer，形式为 (state, action) => state 的纯函数.。描述了 action 如何把 state 转变成下一个 state。
   state 的形式取决于你，可以是基本类型、数组、对象、甚至是 Immutable.js 生成的数据结构。惟一的要点是当 state 变化时需要返回全新的对象，而不是修改传入的参数。
 */
function counter(state = 0, action) {
    switch (action.type) {
        case 'ADD':
            return state + 1
        case 'MINUS':
            return state - 1
        default:
            return state
   }
}
​
//2.声明 actions
//action 是改变 state 的唯一途径，是一个普通的 javascript 对象，它描述了一个行为且是改变 state 的唯一途径。从用户UI操作事件、网络请求回调和 WebSocket 等其他地方获得的数据，最终都会通过 dispatch 函数调用一个 action，从而改变对应的数据。action 必须带有 type 指明具体的行为名称，且能附带上额外的信息。
function addFn() {
    return { type:'ADD' }
}
function minusFn() {
    return { type:'MINUS' }
}
​
// 3.创建 Redux store 来存放应用的状态。store对象的API 有 { subscribe, dispatch, getState }。
let store = createStore(counter)
​
​
// 4.订阅更新，监听state的变化
store.subscribe(() => console.log(store.getState()))
​
// 5.触发action
store.dispatch(addFn())  // 1
store.dispatch(addFn())  // 2
store.dispatch(minusFn())  // 1
​
​
// 6.渲染页面
function render() {
    ReactDOM.render(<App store={store} addFn={addFn} minusFn={minusFn}/>, document.getElementById('app'));
}
render()
// 每当state状态发生变化的时候，重新渲染页面
store.subscribe(render)
    
    
#2.app.jsx
import React, { Component } from 'react';
​
class App extends Component {
    constructor(props){
        super(props)
   }
    render() {
        const store=this.props.store
        const addFn=this.props.addFn
        const minusFn=this.props.minusFn
        const init=store.getState()
        return (
            <div className="App">
                <h1>你好吗？</h1>
               {<p>现在的总数是：{store.getState()}</p>}
               {<button onClick={ ()=>store.dispatch( addFn() ) }>加1</button>}
               {<button onClick={ ()=>store.dispatch( minusFn() ) }>减1</button>}
            </div>
       );
   }
}
export default App;