第一步搭建环境之react环境 redux actions配置

react 开发，集合redux

使用create-react-app gdgoods创建app
添加外库，根据自己需求

下载汇总npm i bootstrap react-bootstrap react-router-dom redux react-redux redux-thunk slate slate-react
使用bootstrap下载 npm i bootstrap react-bootstrap
使用路由安装npm i react-router-dom
使用redux安装 npm i redux react-redux
使用redux异步 npm i redux-thunk
上面是整体需求，以下是扩展
使用slate编辑器 npm i slate slate-react

其他添加看需求，这上面是具体的结果

修改主页为当前目录
Package.json内添加"homepage": ".",（关于打包后放生成品，如果不是放在首页下，就需要设置，目的是相对路径）

使用redux actions的方法.

根目录如图：

image.png

actions|
  goodsActions.js
  goodsActionsType.js
  index.js
store|
  reducers|
    goodsReducers.js
    index.js
  index.js
App.css
App.js

集成redux方法

全局放store
Actions是给与分发
Reducers是全局函数
组件内容需要给与绑定

在目录中goodsActions.js是分发，goodsActionsType是种类
在reducers是redux

1. Store

引入store，在全局赋予
app.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { Route,HashRouter, Switch,Redirect } from 'react-router-dom';
import store from './store';
import Home from './components/Home';
import './App.css';
class App extends Component {
  constructor(props){
    super(props);
    console.log("程序开始启动啦")
  };
  componentDidMount () {
    //console.log("App初始化完成",store)
  }
  render() {
    return (      
           <Provider store = {store}>
           <HashRouter>
              <Switch>
                  <Route path="/" exact component={Home}/>
                  <Redirect to="/" />
              </Switch>
            </HashRouter>
          </Provider>   
    );
  }
}
export default App;

2.Actions代码

其中一个actions的代码

import * as Types from "./goodsActionsType"
function postData(url, data) {
    // Default options are marked with *
    return fetch(url, {
      body: JSON.stringify(data), // must match 'Content-Type' header
      cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
      credentials: 'same-origin', // include, same-origin, *omit
      headers: {
        //'user-agent': 'Mozilla/4.0 MDN Example',
        'content-type': 'application/json'
      },
      method: 'POST', // *GET, POST, PUT, DELETE, etc.
      mode: 'cors', // no-cors, cors, *same-origin
      redirect: 'follow', // manual, *follow, error
      referrer: 'no-referrer', // *client, no-referrer
    })
    .then(response => response.json()) // parses response to JSON
  }
function getData(url){
  return fetch(url,{}).then(response=>{
    return response.text()
  })
}
// 分发事件actions => 页面使用这个函数 
export const setGoods = (data = {}) => {
    let url = "https://www.baidu.com" // 获取物品的url地址
    return (dispatch) => {
        let page = data.page || 1
        let pdata = {}
        pdata.page = page
        // postData(url,pdata).then(data=>{
        //     console.log("初次获取",data)
        //     dispatch({type:Types.SET_GOODS,data:data})
        // }).catch(error=>console.log(error))
        getData(url).then(data=> {
          console.log("初次get",data)
          dispatch({type:Types.SET_GOODS,data:data})
        }).catch(error=>console.log(error))
    }
}

3.Redux代码，和store异步

其中redux的一个代码

import * as Types from '../../actions/goodsActionsType'
let defaultState = {}
function setGoods(state = defaultState,action){
    switch(action.type){
        case Types.SET_GOODS:
        state.issue = action.data
        console.log("得到",state,"data",action,action.type)
        //return state
        return Object.assign({},state) //直接返回state是不会自动的刷新的
        default:
        return state
    }
}
export {
    setGoods
}

其中store/index.js 汇总reducer的代码

// index.js
// applyMiddleware: redux通过该函数来使用中间件
// createStore: 用于创建store实例
import { applyMiddleware, createStore } from 'redux'

// 中间件，作用：如果不使用该中间件，当我们dispatch一个action时，需要给dispatch函数传入action    
// 对象；但如果我们使用了这个中间件，那么就可以传入一个函数，
// 这个函数接收两个参数:dispatch和    getState。这个dispatch可以在将来的异步请求完成后使用，对于异步action很有用
import thunk from 'redux-thunk'

// 引入reducer，index是获取了所有的reducers
import reducers from './reducers/index'

// 创建store实例
let store = createStore(
    reducers,
    applyMiddleware(thunk)
)
//console.log("引入了store",reducers)
export default store

4.页面代码，映射关系

在HOME页面的映射actions

import React, { Component } from 'react';
import {Container,Card,Button, ButtonGroup} from 'react-bootstrap';
import { setGoods } from '../actions';
import { connect } from 'react-redux'
class Home extends Component {
  constructor(props){
    super(props);
    this.state = {
      message: "test",
      spaces: []
    };
    //console.log(props)
  }
  componentDidMount () {
    let {setGoods} = this.props
    setGoods()
    console.log("Home 初始化")
  }
  handleClick(){
    alert("home")
  };
  preClick(e,value){
    //console.log("设置上一页",data)
  }
  nextClick(e,value){
    //console.log("设置下一页",after)
  }
  render() {
    
    return (  
        <Container className="goods">
          <Card>
            <Card.Body>
                内容
            </Card.Body>
          </Card>
        </Container>
    );
  }
}
// mapStateToProps：将state映射到组件的props中
const mapStateToProps = (state) => {
  console.log("state 映射",state)
  return {
      state
  }
}
// mapDispatchToProps：将dispatch映射到组件的props中
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    setGoods(data){
      dispatch(setGoods(data))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Home)

初始配置下载

基于django开发的物品交易网站过程

第一步 搭建环境之react环境 redux actions配置