说明：
组件代码是整体复制的，没有切分，可直接使用，注意文件路径就好
先说一下写两个功能的原因是，要写使用两个及以上reducer的方法
因为redux只能定义一个store，即一个应用一个store，而store只接收一个reducer，所以这两个reducer不同功能不同数据，需要将这些reducer整合到一起；
功能：
组件1：
store数据：number
store方法：点击按钮每次加100
组件2：
store数据：异步请求的100条数据
store方法：接受输入，点击增加异步请求提交，store数据增加，返回视图展示
组件1的方法不牵涉异步，组件2需要用到action异步
注意，数据和方法都在store中完成，旧数据和新数据都存储在store，组件内只是拿取，不做任何数据逻辑修改
安装：
安装redux 可在任何框架使用
npm install redux --S
安装react redux react使用的redux
npm install react-redux --S
处理异步中间件：
npm install redux-thunk --save
开始：
redux单向数据流向大概是这样的：
1.视图交互触发=》action响应
2.store收到action的交互需求=>派reducer去接应
3.reducer带着旧store数据，去匹配action的type，看看用户想用action的什么方法
4.视图调用action中的方法改变store，然后从store中取新的数据展示给用户
总结下来就是仓库中要定义三个大类，第一store，第二action，第三reducer
在react使用redux，分为两大步，
第一步：创建仓库
第二步：在组件中使用仓库
创建仓库：
在store文件下创建store.js
1.从redux中引入createStore方法，使用createStore创建store，createStore函数接收三个参数，
后面两个不用可以省略，接受的reducer是唯一且必须的
2.引入redux的中间件thunk，用于action中方法的异步处理，引入applyMiddleware方法，将中间件整合一个数组
3.将创建好的rootReducer文件，定义的reducer传入createStore作为参数
4.将store导出
import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
//引入rootReducer集合
import rootReducer from './reducers/index'
//store接收三个参数 第一个reducer或者reducer集合
//第二个
//第三个中间件方法
//applyMiddleware方法，将所有中间件组成一个数组，依次执行
const initialState={};
const middleware =[thunk];
const store = createStore(rootReducer,initialState,applyMiddleware(...middleware))
export default store定义点击按钮增加数字的action，在action文件夹里，创建countActions.js文件
1.action可以写成对象，也可以写成如下这样的函数，函数型可以接收组件传来的参数
我这里无须传参
2.action无论写成对象还是函数，都必须定义一个type属性，用于reducer来判断执行哪个方法
这里我们将type值单独封装在一个actionType.js文件里
3.引入actionType.js文件中需要用到的type类型，这里我们只需要用到ADD_COUNT
4.大多数情况下我们将type类型定义为常量，并使用大写
import {ADD_COUNT} from '../actions/actionType'
export const conutAdd = dispatch => {
return {
type: ADD_COUNT,
dispatch
}
}actionType.js
//文章列表组件的type
export const FETCH_POSTS = "fetch_posts"
export const NEW_POST = 'new_post'
//点击加数字组件的type
export const ADD_COUNT='add_count'
现在创建第一个点击增加数字组件的reducer
在reducer文件夹下创建counterReducer.js
1.reducer是一个纯函数，它接收两个参数，第一个是初始的（旧的）state（store中的数据），第二个是action
2.定义一个初始的state数据，赋值给state，通过action下面的type值，用switch判断，不同的type调用什么不同的方法（返回什么不同的数据）
import {ADD_COUNT} from '../actions/actionType'
let num = 10000
function counterReducer (state=num,action){
console.log('我是count_action',action)
switch (action.type){
case ADD_COUNT :
return state=state+100
break;
default:
return state
break;
}
}
export default counterReducer定义第二个增加文章列表组件的action，在action文件夹下，创建postActions.js
1.这个action中定义了两个action，每个action拥有不同的type
2.第一个action用于页面初始获取文章列表数据，存在store中
3.第二个action用于请求和存储用户输入提交后产生的新数据
4.注释之后采用了es6的写法，postData=>dispatch=> 箭头函数只有一个参数，可以不写括号，箭头后是箭头函数return的值
5.因为已经安装了thunk中间件所以可以直接写异步方法
6.action函数return出的函数接收一个dispatch参数，用于分发action
7.dispatch函数中，将type和新请求到的数据分发出去，定义一个payload接收请求到的数组item
//action中做逻辑处理，定义不同逻辑的type类型，便于dispatch分发给store
import {FETCH_POSTS,NEW_POST} from './actionType'
// export function fetchPosts(){
// console.log('触发action')
// return function (dispatch){
// fetch("https://jsonplaceholder.typicode.com/posts")
// .then(res=>res.json()) //解析json
// .then(posts=>
// //通过dispatch将数据派发出去
// dispatch({
// type:FETCH_POSTS,
// payload:posts
// })
// )
// }
// }
//ES6写法
//获取数据
export const fetchPosts =()=>dispatch=>{
fetch("https://jsonplaceholder.typicode.com/posts")
.then(res=>res.json()) //解析json
.then(item=>
//通过dispatch将数据派发出去
dispatch({
type:FETCH_POSTS,
payload:item
})
)
}
//提交数据
//将postData参数提交
export const createPost=postData=>dispatch=>{
fetch("https://jsonplaceholder.typicode.com/posts",{
method:"POST",
headers:{
"content-type":"application/json"
},
body:JSON.stringify(postData)
})
.then(res=>res.json())
//提交之后将新数据返回，派发
.then(item=> dispatch({
type:NEW_POST,
payload:item
}))
}
第二个文章列表组件的reducer，在reducer文件夹下创建postReducer.js
1.刚才上面action的请求到的数据用payload接收了，所以在reducer里，要用action.payload取出，并传入store
2.请求到的数据用item参数接收到store
3.增加后的一条新数据用newitems参数接收到store
4.注意要写default，如果action匹配不到type或者没做任何改变，reducer则返回原state
import {FETCH_POSTS,NEW_POST} from '../actions/actionType'
//定义state中的数据
const initialState={
items:[],
//注意：用户提交的数据，是个对象
// const post = {
// title:this.state.title,
// body:this.state.body
// }
newitems:{}
}
//创建reducer
//reducer中不做逻辑处理，只做传递给store的作用，根据不同的action类型，
//判断返回什么state，没有action则不做state处理
//作用：传递，不做逻辑处理，接收旧state，返回action处理后的新state
//一个reducer接收一个state，如果想管理不同的state，可以创建多个reducer
export default function postReducer (state=initialState,action){
// console.log('触发reducer')
switch(action.type){
//若触发FETCH_POSTS，返回请求的state数据
case FETCH_POSTS:
return{
...state,
//将action中的新数据赋值给store的state中的数据
items:action.payload
}
case NEW_POST:
return{
...state,
//将新数据返回赋值给newitems
newitems:action.payload
}
//如果没有任何action 就return原state
default:
return state
}
}最后，要将reducer传递给store做参数，因为store只接受一个reducer，我们有两个reducer，分别有不同的数据要处理，但是都要共享放在store中，这就要求我们将reducer整合起来，传入store
在reducer文件夹下创建index.js
1.从redux中引入combineReducers，用于整合多个reducer
2.将多个导出的reducer传入combineReducers
3.在一开始的createStore注入的reducer，一定是这个整合后的reducer，这样才能保证组件内共同使用
//将reducer集合起来的方法
import { combineReducers } from 'redux'
import postReducer from './postReducer'
import counterReducer from './counterReducer'
export default combineReducers({
posts:postReducer,
counter:counterReducer
})
现在创建仓库已经完毕，开始在组件中使用了
首先要想每个组件都能用到store中的数据，可以使用Provider组件包裹根组件
入口文件index.js中
1.引入Provider组件，将组件包裹在根组件下面
Provider：它是react-redux 提供的一个 React 组件，作用是把state传给它的所有子组件，也就是说 当你用Provider传入数据后 ，下面的所有子组件都可以共享数据。
2.将定义好的store引入，并且传入Provider组件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
//Provider是react-redux提供的一个组件
import { Provider } from 'react-redux'
import store from './store/store'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
,document.getElementById('root'));
App.js父组件中：
引入三个功能组件
import React from 'react'
import Article from './Article'
import PostForm from './PostForm'
import Counter from './Counter'
function App(){
return <>
<Counter></Counter>
<PostForm></PostForm>
<Article></Article>
</>
}
export default App
Counter.js计数组件：
1.首先想用store中的数据，必须引入connect函数
2.connect函数的写法，connect()()，接受三个参数第一个括号中是，store中的最新数据和action中的方法，
第二个括号中的参数是要使用数据的组件名
3.将mapStateToProps解析出来，取到最新的counter值，state.counter的意思是，去state中寻找名为counter的reducer
4.将此reducer下面的state数据赋值给本组件的num变量
5.在视图标签中，用this.props.num就可以使用
6.取出action中的点击增加方法，引入action中需要用到的方法，在connect中的第二个参数解析出来
7.在组件视图方法绑定上，或者其他方法中，使用this.props.countAdd即可使用
import React, { Component } from 'react'
import { connect } from 'react-redux';
import {conutAdd} from '../Store3/actions/countActions'
class Counter extends Component {
render() {
console.log('this.props.num',this.props.num)
return (
<div>
我是第二个reducer
<p>{this.props.num}</p>
<button onClick={this.props.conutAdd}>点击加</button>
</div>
)
}
}
const mapStateToProps =state=>({
num:state.counter
})
export default connect(mapStateToProps,{conutAdd})(Counter) inout表单组件：PostForm.js
1.取到用户输入的数据后，将action方法调用时，传参给action
2.注意，定义用户数据时用的什么格式，在相对的store中定义初始化数据时就用什么格式去接收
3.只需要用方法不需要用store中的数据，connect 第一个参数可以设置为null
import React, { Component } from 'react'
import { connect } from 'react-redux';
import {createPost} from '../Store3/actions/postActions'
class PostForm extends Component {
constructor(props){
super(props)
this.state={
title:'',
body:''
}
this.onSubmit= this.onSubmit.bind(this)
this.onChange = this.onChange.bind(this)
}
render() {
return (
<div>
<h1>添加内容</h1>
<form onSubmit={this.onSubmit}>
<div>
<label>title</label>
<br/>
<input type="text" name='title' onChange={this.onChange}
value={this.state.title}
/>
</div>
<div>
<label>body</label>
<br/>
<textarea name="body" onChange={this.onChange}
value={this.state.body}
></textarea>
</div>
<button type='submit'>添加</button>
</form>
</div>
)
}
onChange(e){
// console.log('e.target.name',e.target.name)
// console.log('e.target.value',e.target.value)
this.setState({
[e.target.name]:e.target.value
})
}
onSubmit(e){
e.preventDefault();
const post = {
title:this.state.title,
body:this.state.body
}
//调用action中的方法 需要将视图上用户输入的参数传给store
this.props.createPost(post)
this.setState({
title:'',
body:''
})
}
}
export default connect(null,{createPost})(PostForm)最后，文章列表组件Article.js
1.页面初始化时，在DidMount中调用action请求数据，在mapStateToProps的store中取出数据并赋值给组件中的变量
2.这里用到了componentWillReceiveProps生命周期，在每次数据变化时监听最新的数据
3.监听store中的newPost是否有数据，如果有就添加进items数组
4.至此完成了在store初始化数据，在action中请求数据，返回给reducer，reducer传递给store，组件拿取新数据的过程
import React, { Component } from 'react'
import { connect } from 'react-redux';
//组件中触发action
import {fetchPosts} from '../Store3/actions/postActions'
class Article extends Component {
componentDidMount(){
this.props.fetchPosts() //执行action
}
componentWillReceiveProps(nextProps){
if(nextProps.newPost){
this.props.items.unshift(nextProps.newPost)
}
// console.log(nextProps)
}
render() {
const dataItem = this.props.items
return (
<div>
<h1>Posts</h1>
{
dataItem.map(item=>{
return <div key={item.id}>
<h3>{item.title}</h3>
<p>{item.body}</p>
</div>
})
}
</div>
)
}
}
const mapStateToProps =state=>({
//state.posts是store中reducer集合的posts
items:state.posts.items,
newPost:state.posts.newitems
})
export default connect(mapStateToProps,{fetchPosts})(Article)结束
总体感受吧 rudex还是比vuex更麻烦一些 虽然里面的api很像 都是那几个 但是redux是单向数据流，就是方便判断数据流向哪里出了问题，但是vuex双向绑定就是方便阿，之前vuex用惯了，突然切换redux还是有点不方便，不过啦，多看文档多练习多思考吧
