react-redux的初级使用（react初学者笔记）

一.create-react-app脚手架的搭建和运行

npm install -g create-react-app

create-react-app <项目名称> 

cd <项目名称> 

npm start

二.redux的简单使用

引入包

npm install redux --save

步骤：
1.写reducer方法(state,action)
2.创建store（通过createStore）
3.写方法（调用dispatch(action)）
4.写显示界面
5.监听变化，重新渲染(store.subscribe)

为方便展示，这里直接改index.js文件
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {createStore} from 'redux';
// import * as serviceWorker from './serviceWorker';
//用于操作状态的仓库，通过动作操作state
const reducer = function(state={num:10},action){
  switch (action.type) {
    case "add":
       state.num+=1;
       break;
    case "decr":
         state.num-=1;
         break;
    default:
      console.log("找不到对应的action.type")
    }
    return {...state}; //相当于复制得到一个新的state
}

//创建store对象，关联对应仓库
const store = createStore(reducer)

//调用dispatch执行,传入对应的action.type，指明执行的方法
function add(){
  //通过仓库的方法dispath进行修改数据
  store.dispatch({type:'add'})
  console.log(store.getState())
}
//调用dispatch执行,传入对应的action.type，指明执行的方法
function decr(){
  //通过仓库的方法dispath进行修改数据
  store.dispatch({type:'decr'})
  console.log(store.getState())
}

//显示界面
const Counter = function(props){
  let state = store.getState()
  return (
    <div className="index">
      <h1 >值：{state.num}</h1>
      <button onClick={add}>加一</button>&nbsp;&nbsp;&nbsp;
      <button onClick={decr}>减一</button>
    </div>
  )
}

//监听变化，重新渲染
store.subscribe(()=>{
  ReactDOM.render(
    <Counter />,
     document.getElementById('root')
   );
})

ReactDOM.render(
 <Counter />,
  document.getElementById('root')
);

// serviceWorker.unregister();

---

---

三.react-redux的简单使用

引入包

npm install --save react-redux

步骤：
1.写reducer
2.初始化store
3.写映射state数据，映射dispatch方法
4. 写你的组件，调用映射的方法
5. 使用connect关联3映射方法和4你的组件
6. 使用 Provider 包裹5组件，渲染
为方便展示，这里直接改index.js文件
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {createStore} from 'redux';
import {Provider,connect} from 'react-redux'
/**
 * 步骤：1. 写reducer
 *      2. 初始化store
 *      3. 写映射state数据，映射dispatch方法。
 *      4. 写你的组件，调用映射的方法
 *      5. 使用connect关联3映射方法和4你的组件
 *      6. 使用 Provider 包裹5组件，渲染 
 */

class Counter extends React.Component{
    render(){
      const value = this.props.value;
      const onAddClick = this.props.onAddClick;
      return(
        <div>
          <h1>计数的数量：{value}</h1>
          <button onClick = {onAddClick}>加一</button>
        </div>
      )
    }
}

function reducer(state={num:0},action){
  switch (action.type) {
    case "add":
       state.num+=1;
       break;
    default:
      console.log("找不到对应的action.type")
    }
    return {...state};
}

const store = createStore(reducer);

//将state映射对应的props函数
function mapStateToProps(state){
  return {
    value : state.num
  }
}

//动作
const addAction = {
  type:'add'
}
//将修改state数据方法dispatch映射到props，实现方法贡献
function mapDispatchToProps(dispatch){
  return {
    onAddClick:()=>{
      dispatch(addAction)
    }
  }
}

//组件和数据进行连接
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

// /**自动将store里的state和组件进行关联 */
ReactDOM.render(
  <Provider store = {store}>
    <App />
  </Provider>
  ,
   document.getElementById('root')
);

---

附上这两个文件的github地址：github地址

---