redux

作者: xueyueshuai | 来源:发表于2021-03-19 15:28 被阅读0次

六、使用redux管理数据
Redux实践（1）
redux、react-redux、react-router入门
Redux - lewisbook
react简单使用react-redux步骤
redux数据流之redux-saga
redux的简单应用
Redux简介
redux基础
在项目中引入redux管理数据

一共写了两个文件

//文件1 /src/store.js
import { createStore } from "redux";
import reducer from "./reducer";

const store = createStore(reducer)
export default store

//文件2 /src/reducer.js
const defaultState = {
  focus: false,
  inputValue: "",
};

const func = (state = defaultState, action) => {
  if (action.type === "setFocus") {
    let newState = JSON.parse(JSON.stringify(state));
    newState.focus = action.value;
    return newState;
  }
  if (action.type === "inputChange") {
    let newState = JSON.parse(JSON.stringify(state));
    newState.inputValue = action.value;
    return newState;
  }

  return state;
};

export default func;

使用的地方

// /src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { GlobalStyle } from "./style";
import Header from "./component/header";
import Body from "./component/body";

import store from "./store";
import { Provider } from "react-redux";
const App = () => {
    return (
      <Provider store={store}>
        <div>
          <GlobalStyle />
          <Header />
          <Body />
        </div>
      </Provider>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));

import React, { Component } from "react";

import { connect } from "react-redux";

import { CSSTransition } from "react-transition-group";
import "./index.css";

import {
  HeaderWrapper,
  Nav,
  Logo,
  Content,
  ContentItem,
  SearchWrapper,
  Input,
  Icon,
  LoginBtn,
  WriteBtn,
} from "./style.js";
class Header extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <HeaderWrapper>
        <Nav>
          <Logo className="left">简书</Logo>
          <Content>
            <ContentItem>发现</ContentItem>
            <ContentItem>关注</ContentItem>
            <ContentItem>消息</ContentItem>

            <SearchWrapper>
              <Input
                value={this.props.inputValue}
                onChange={this.props.handleInputChange}
                onFocus={this.props.inputFocus}
                onBlur={this.props.inputBlur}
                className={this.props.focus ? "focus" : "nofocus"}
              />
              <Icon className={this.props.focus ? "focus" : "nofocus"}>S</Icon>
            </SearchWrapper>
          </Content>
          <LoginBtn className="right" />
          <WriteBtn className="right" />
        </Nav>
      </HeaderWrapper>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    focus: state.focus,
    inputValue: state.inputValue,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    handleInputChange: (e) => {
      let value = e.target.value;
      const action = {
        type: "inputChange",
        value,
      };
      dispatch(action);
    },
    inputFocus: () => {
      const action = {
        type: "setFocus",
        value: true,
      };
      dispatch(action);
    },
    inputBlur: () => {
      const action = {
        type: "setFocus",
        value: false,
      };
      dispatch(action);
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Header);

import React, { PureComponent } from "react";

import { connect } from "react-redux";

class Body extends PureComponent {

  render() {
    console.log('body-render');
    return (
      <div>
        <div>focus 的状态:{this.props.focus ? "yes" : "no"}</div>
        <div>inputValue 的值:{this.props.inputValue}</div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    focus: state.focus,
    inputValue: state.inputValue,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {};
};

export default connect(mapStateToProps, mapDispatchToProps)(Body);