react-redux一看就会的简单教程

第一步：
在根目录下的index.js中导入redux 与react-redux的函数
如：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {HashRouter,BrowserRouter} from 'react-router-dom';
import { createStore,applyMiddleware} from 'redux';//createStore用来创建store的   applyMiddleware用来处理 ajax异步请求的！
import thunk from 'redux-thunk';//用于异步处理
import {Provider} from 'react-redux';//用于将仓库的数据传到组件中
import reducers from './redux_manage/index'//将各个reducer通过combineReducers()方法组装成reducers
const store = createStore(reducers,applyMiddleware(thunk))//创建仓库
ReactDOM.render(
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>,
document.getElementById('root')
);
registerServiceWorker();






第二步：
在src目录下创建 redux_manage目录 用于存放各种reducer.js
如 list_reducer.js
function list(state={//设置初始化仓库数据
loading:true,
listData:[]
},action){
switch(action.type){//判断事情类型
case "LIST_SUCCESSGET":
return {//返回新的对象
loading:false,
listData:action.data
};
default:
return state;
}
}
export default list


第三步：
在 redux_manage目录下创建index.js 用来组装redux_manage目录下的各个reducer.js
如：
import { combineReducers } from 'redux'//将list 、detail、user等reducer组合起来(状态分而治之，便于管理)
import list from './list_reducer'
import detail from './detail_reducer'
import user from './user_reducer'
let reducers = combineReducers({
list,
detail,
user
});
export default reducers




第四步：
哪个组件需要使用仓库的数据就直接通过this.props获取就好  如果要修改的话就得调用dispatch咯
如：
import React from 'react'
import { Menu,List,Avatar,Icon,Tag  } from 'antd';//antd为阿里开发的react组件库
import {Link} from 'react-router-dom';
import mainData from '../config/book_mathList';
import SelectTags from './selectTag';
import axios from 'axios'
import { connect } from 'react-redux';//高阶函数 用于获取store里state的数据
var indexs = ""
class BookList extends React.Component {
constructor(arg){
super(arg)
this.getData(this.props.newTypes)
}
componentWillReceiveProps(nextPorps){//这里发生了重复请求的问题  不知道为啥？？
if(indexs!==nextPorps.newTypes){
this.getData(nextPorps.newTypes);
indexs = nextPorps.newTypes;
}
}
shouldComponentUpdata(nextProps, nextState){
return this.props.newTypes !== nextProps.newTypes;
}
getData(taps){//这里我们可以先输出this.props看看里面有什么
this.props.dispatch((dispatch)=>{//我们这里可以用回调函数做参数的原因是因为我们使用了thunk！
axios.get(`http://localhost:520?type=${taps}`)
.then((res)=>{//数据请求成功后dispatch事情到仓库
dispatch({
type:'LIST_SUCCESSGET',
data:res.data
})
})
.catch((error)=>{
dispatch({
type:'LIST_ERROR',
data:error
})
})
})
}
render(){
const IconText = ({ type, text }) => (//sfc组件
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);
return(
<List
loading = {this.props.loading}
className = 'book_list'
    itemLayout="horizontal"
    dataSource={this.props.listData}
    renderItem={item => (//这里的item相当于data中的每一条数据！  
      <List.Item
      actions={[<IconText type="star-o" text={item.lookN} />, <IconText type="like-o" text={item.lookN} />, <IconText type="message" text={item.pinglunN} />]}
      >            
        <List.Item.Meta         
          avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
          title={<div><SelectTags item = {item}/><Link to={'/detail/id='+item.authorId}>{item.title}</Link></div>}
          description={(//描述里面是可以用jsx的  但是要记得用{()}
          <p><Link className='authorA' to={'/user/userid='+item.authorId}>{item.author}</Link>
          {item.direction}
          </p>
          )}
        />
        
      </List.Item>
    )}
  />
)
}
}
//其实state存放了三个仓库的state包括list detail user  我们这里只需要list reducer的数据所以只需要state.list就好
export default connect(state=>state.list)(BookList)